Can't make my fullpage slider responsive
The fullpage slider's responsiveness works that way, that your slider will be as big as the screen is. Then it will make the background image as big as it has to be to always cover the slider at any given screen ratio, and it keeps the layers inside the slider, that they are always 100% visible.
Because how this works, you have "limitations". The biggest problems are caused by, that this is the only slide area, where you can have your layers:
So you can't stick layers to the bottom, top or sides of the slider, and can't move out from that given area. You can use our customized slider size options to increase this area to be more like as it will look like on a phone:
But phones have different heights, so in your phone it might looks like you are covering the whole slider, but on another you don't:
So you have to think of the positioning of your layers in a way, that they are inside a box, which will be either vertically or horizontally in the middle.
Another problem caused by this is, that don't use many layers, as I can see your slider in a small height monitor too:
And it's still the same slider, but since it has the size of your screen, you have less, than half of the space in this case as before.
The next problem is given by this, that people are trying to use image layers, and they will have empty spaces in the top and bottom, or at the sides. Don't use image layers to fill in the slides, because they are still only able to be inside the slide area, either vertically or horizontally in the middle, so they can't cover your slides:
only background images can cover your slides!
So these are the rules you need to follow to have a responsive fullpage slider:
- Set device specific slider size for mobiles to increase the slide height.
- Don't try to position your layers based on where they are on the slides. Use layer chaining to position them to each other instead!
- Use the layer chaining first, and only after that change the position and the size of your layers on tablet and mobile views! The layer chaining changes where your layer is positioned from, so that can mess up modified views!
- Don't use many layers, because on some screens you won't have space for them!
- Always use either background image, background video or background color on your slides to make something cover them at any given screen!
About giving customized slider sizes and better positioning of your layers, check out the responsivity videos.