[josheaton]

Hi Juan,

I recently asked you a question about the mobile display of the BBQ image and how the slider does not display the overlay text. I’m curious is there is a way to disable the slider from showing on mobile completely. For example, I’d like it to show the header image with the menu below, and then directly show the page break with the info boxes.

Is this possible?

[Juanfra Aldasoro]

Hi Josh,

I hope you are doing well. Thanks for writing.

Yes, you can always hide and display things with CSS. Perhaps you can take a look at what Media queries are: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

For BBQ’s home slider, the selector would be body.home .slider{}

So for example, for viewports smaller than 860px , with a CSS code like this one you will hide the slider.

@media screen and (max-width: 860px) {
   body.home .slider { display: none; }
}

Best,
Juan.

[josheaton]

Would this disable the slider for both mobile and full web browser views?

[Juanfra Aldasoro]

Hi Josh,

Thanks for the follow up.

For viewports below 860px, in any device.

Best,
Juan.

[josheaton]

Thanks, this worked perfectly!

[Juanfra Aldasoro]

Excellent! I’m happy to help.

Have a nice day,
Juan.