LayerSlider thumbnail navigation disappears behind content on mobile

[Youprinting]

Hi there,

I’m having a small issue on LayerSlider thumbnail navigation on mobile. The content of the 2nd column will be placed below the LayerSlider but it covers the thumbnail navigation. See image:

I tried and tried on css but nothing seems to work. Do you have a clue how to fix this?

Thanks in advance!

Best regards,

Delana

[paul.r]

Hi Delana,

You can fix this by adding a min-height.

You can add the code below in Theme Options > CSS

@media(max-width:767px) {
.my-slider-column {
    min-heigth:900px;
}
}

Hope this helps

[Youprinting]

Hi Paul,

Unfortunately that won’t work since the slider is responsive and scales to the size of the screen. The smaller the screen, the further down the content is pushed in this solution. Any other options?

Best regards,

Delana

[rad]

Hi @Youprinting,

The problem with the slider is that the slide and thumbnails are on different container where adding clear element doesn’t push it. Plus it uses fixed height, so the only solution is that CSS, but with lower height value. Like this

@media(max-width:767px) {
.my-slider-column {
    min-heigth:462px;
}
}

Thanks!

[christian]

Hey Delana,

I was working on this thread at the same time as @Rad. If you want an alternative solution, please try this code:

.my-slider-column {padding-bottom:100px}

To see how I came up with that solution, please watch this screencast.

Update: I forgot to add that you can also use a Gap element below your slider. You can use several of them to display in different breakpoints using the Hide During Breakpoints feature.

Hope that helps.