Docs

[ansonofficial]

Hi Support,

http://brothersbassin.com/

On this page I have a slider below masthead. While it looks great on large display and laptop, the poster image looks very small and not good.

Is there a way to hide the below masthead image on mobile, and I’ll use the image element instead for this area on mobile?

Thanks!

Anson

[ansonofficial]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for writing in.

You can deactivate the masthead slider and add it within cornerstone section instead. With section’s HIDE BASED FROM SCREEN WIDTH option. You can decide when to hide it, you can add two section where hidden on desktop and mobile.

Cheers!

[ansonofficial]

True, but will I be able to have that bottom anchor?

Anson

[John Ezra]

Hi there,

Thanks for updating the thread! You won’t have the scroll to bottom anchor. If you need that you can keep your setup as is and then just CSS to hide the slider on mobile. You can use that in conjunction with the hide based on screen width to show/hide your image on mobile.

You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

@media (max-width:979px) {
    .x-slider-container.below {
        display: none;
    }
}

Hope this helps – thanks!

[Author]

Posts