[Resolved] Making container sticky on mobile devices.

[Sean]

Hi,

I would like to make the container sticky on mobile devices on the following page.

https://tudorhouseholidays.co.uk/the-hepburn-scarborough/

I need the slideshow to be sticky on mobile, it’s placed within a container.

Kind regards,

Sean

[David]

Hi there,

1. Add this CSS to your site:

@media(max-width: 768px) {
    .is-sticky-mobile {
        position: sticky;
        top: 0;
    }
}

Note the top: 0; you can change this to a value eg. top: 60px; to offset the sticky position.

2. Select the Container Block the slider is in, and in Advanced > Additional CSS Class(es) add: is-sticky-mobile

[Sean]

Hi,

How do I do it so it appears below the sticky header?

[Fernando]

Hi Sean,

Try this code instead:

@media(max-width: 768px) {
    .is-sticky-mobile {
        position: sticky;
        top: 220px;
    }
}

[Sean]

Thank you that worked brilliantly!

[Fernando]

You’re welcome, Sean!

[Author]

Posts