Search code examples
htmlcssslideshowresponsive

Change Content from div container if it is smaller than XYZ px

I have a little problem with my website. If the screen of the device smaller than xyz px the slideshow doesn´t work anymore. And I want to be there a picture instead of the slideshow.

The slideshow that I am using is Owl Carousel How can I do this?

Solution

  • You can use the CSS media rules. CSS3 @media Rule

    Both elements (image and carrousel) must be in your HTML code. Without the appropiate CSS media query, both would be displayed, but if you provide the correct rules, you can hide/display the desired element, under each diferent screen size. 

    .my_carrousel{ display: block; }
.my_image{ display: none; }

@media screen and (max-width: 480px) {
    .my_carrousel{ display: none; }
    .my_image{ display: block; }
}