How to automatically hide carousel of a web page on mobile devices?

Question

I have a web page built with bootstrap 3 and there is a carousel component on top of the page. I want to hide complete <div> section when the page is opened on a mobile device. Also I want to hide it on a pc when the screen resolution (not window size) is lower than 800x600.

Can this be achieved using a simple meta tag or do I have to use javascript?

Answer 1

It's possible with media queries.

Let us consider that you have a carousel which is wrapped inside a div with id "carouselContainer"

Now in your css;

@media (max-width:800px) {
    #carouselContainer {
        display:none !important;
    }
}

It will hide the carousel when the display is too small.

To know more about media queries, read this link

Answer 2

If your project is flexible and you are not fixed to use the maximum width of 800, then consider using the .hidden-xs class, which will hide the div on a display with a width lower than 768px.

<div class="carouselContainer hidden-xs">
...
</div>

Bootstrap Grid documentation