zkanoca zkanoca - 1 month ago 11
HTML Question

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

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

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

Comments