I've added the related URL here as the field said that it wasn't valid. Guessing because it's an IP but not sure.
Hi,
I'm trying to get a layerslider to be 100% width & 100% height on a page (link in related URL field of this form).
I am using the Beaver Builder page layout plugin and adding in the layerslider shortcode into a simple HTML module. All rows and module settings have been set to full-width, full-height with no padding.
If placing a simple photo or anything else into these rows then they show perfectly to the window width and height but layerslider will not allow me to do that no matter what I try.
I've even tried importing some of the layerslider demos and they all have problems of one sort or another.
If you go to that link then you'll see that it looks fine on a desktop machine but on a mobile (I am testing on an iPhone 7 plus) it does indeed fill the screen but only because I set the slider height to 1000px which I shouldn't really need to be doing. I couldn't find a way to set the slider height to 100% though as it seems like that field only accepts px values?
This appears to work fine on both desktop machines and also my mobile phone however importing that into my installation comes out with the problem mentioned above.
I'm thinking therefore that this must be either related to my theme or perhaps some of the custom code that I've placed on the page in order to have the transparent header.
If it is that then I know that this isn't obviously due to yourselves but if there is anything at all that you could offer as a solution then I would be very appreciative of anything you could offer up.
Judging from your description, the problem is likely going to be related to your theme builder. As you've mentioned there is no issue like this with the plugin, only after adding the slider through your builder.
Many thanks for the reply. I am using the shortcode method in my site so nothing different there and also your own documentation says that LayerSlider works with page builders so not too sure what the problem is here.
I just tried turning off the theme and going back to the 2017 theme and placed the shortcode directly into the WordPress text editor field but now obviously I get the menu at the top of the screen and the standard 2017 header so again the slider is still not 100% fullscreen.
How (if utilising the standard theme) do you get a slider to go 100% full width and full height?
If I can figure out why this isn't working on a built-in theme then perhaps I can figure out what is going on with my theme.
If I can't get the slider working with a default theme though then there must be something else at play here surely?
Many thanks for any more help on this as it is very much appreciated.
I have checked your site again but for me the slider is displayed as fullscreen currently. It is covering the whole width and height of the viewport on pageload.
Have you managed to fix the problem in the meantime ?
In case not, could you please specify on what OS/browser/device are you experiencing this exactly ?
I've not changed anything no and the problem is still there I'm afraid. If you check the page on a mobile device such as an iPhone then you'll see what I'm referring to. Checking it in a browser mobile view doesn't exhibit the same problem.
I can see a thin white gap on top of the page, above the slider, on mobile devices if that is what you meant. However that gap is not related to LayerSlider. You can confirm this by switching the mobile to landscape mode, the gap dissapers. This white gap is generated by the element where you inserted the slider. There is most likely an attribute added with custom CSS on the slider's parent element that is applying this.
RELATED URL - http://77.104.171.192/~flyheli7/layer-slider-test/
I've added the related URL here as the field said that it wasn't valid. Guessing because it's an IP but not sure.
Hi,
I'm trying to get a layerslider to be 100% width & 100% height on a page (link in related URL field of this form).
I am using the Beaver Builder page layout plugin and adding in the layerslider shortcode into a simple HTML module. All rows and module settings have been set to full-width, full-height with no padding.
If placing a simple photo or anything else into these rows then they show perfectly to the window width and height but layerslider will not allow me to do that no matter what I try.
I've even tried importing some of the layerslider demos and they all have problems of one sort or another.
If you go to that link then you'll see that it looks fine on a desktop machine but on a mobile (I am testing on an iPhone 7 plus) it does indeed fill the screen but only because I set the slider height to 1000px which I shouldn't really need to be doing. I couldn't find a way to set the slider height to 100% though as it seems like that field only accepts px values?
Taking a look at one of your demo pages though :
https://layerslider.kreaturamedia.com/sliders/creative-agency/
This appears to work fine on both desktop machines and also my mobile phone however importing that into my installation comes out with the problem mentioned above.
I'm thinking therefore that this must be either related to my theme or perhaps some of the custom code that I've placed on the page in order to have the transparent header.
If it is that then I know that this isn't obviously due to yourselves but if there is anything at all that you could offer as a solution then I would be very appreciative of anything you could offer up.
Thank you in advance for any help with this.
Best wishes,
Mark
Hey Mark,
Judging from your description, the problem is likely going to be related to your theme builder. As you've mentioned there is no issue like this with the plugin, only after adding the slider through your builder.
Please try to insert a slider with one of the plugin's default methods instead of the builder, to see if it works properly that way. You can find the available publishing methods in the documentation on the following URL: https://support.kreaturamedia.com/docs/layersliderwp/documentation.html#publishing-sliders
Hi Attila,
Many thanks for the reply. I am using the shortcode method in my site so nothing different there and also your own documentation says that LayerSlider works with page builders so not too sure what the problem is here.
I just tried turning off the theme and going back to the 2017 theme and placed the shortcode directly into the WordPress text editor field but now obviously I get the menu at the top of the screen and the standard 2017 header so again the slider is still not 100% fullscreen.
How (if utilising the standard theme) do you get a slider to go 100% full width and full height?
If I can figure out why this isn't working on a built-in theme then perhaps I can figure out what is going on with my theme.
If I can't get the slider working with a default theme though then there must be something else at play here surely?
Many thanks for any more help on this as it is very much appreciated.
Best wishes,
Mark
I have checked your site again but for me the slider is displayed as fullscreen currently. It is covering the whole width and height of the viewport on pageload.
Have you managed to fix the problem in the meantime ?
In case not, could you please specify on what OS/browser/device are you experiencing this exactly ?
Hi Attila,
I've not changed anything no and the problem is still there I'm afraid. If you check the page on a mobile device such as an iPhone then you'll see what I'm referring to. Checking it in a browser mobile view doesn't exhibit the same problem.
Thanks,
Mark
I can see a thin white gap on top of the page, above the slider, on mobile devices if that is what you meant.
However that gap is not related to LayerSlider. You can confirm this by switching the mobile to landscape mode, the gap dissapers.
This white gap is generated by the element where you inserted the slider. There is most likely an attribute added with custom CSS on the slider's parent element that is applying this.