How Do I Hide the Ethos Blog Post Slider based on Screen Size?

[anotheruser15]

Hello,

I’m new to x theme and website building in general. How can I hide the blog post slider on certain screen sizes? So far I’ve been able to hide the post carousel for smaller screen sizes using the following CSS. I have not been able to figure out how to hide the blog post slider.

@media (max-width:480px){
ul.x-post-carousel.unstyled.slick-initialized.slick-slider {
display: none !important;
}
}

Thank You,

Adrian

[jade]

Hi Adrian.

Please try:

@media (max-width:480px) {
    .blog .x-post-slider,
    ul.x-post-carousel.unstyled.slick-initialized.slick-slider {
        display: none !important;
    }
}

You may check these links on how to write or target page elements using CSS:

https://www.w3schools.com/cssref/css_selectors.asp
https://www.w3schools.com/cssref/sel_element_element.asp

Hope this helps.

[anotheruser15]

Hello Jade,

Thank you for you help. The code you sent me worked great.
I appreciate the links to the CSS stuff as well. I’ll be sure to check that out.

Regards,

Adrian

[ruenel]

Hey Adrian,

You’re welcome!
We’re glad we were able to help you out.

Best Regards.