Media queries work when zoomed on desktop but not on mobile

Question

I have some media queries like this-

@media (min-width: 576px) {
    .zigzag-lines{
        display: none;
    }

    .decor-single-quote {
        display: none;
    }
}

@media (min-width: 768px) {
    .zigzag-lines{
        display: block;
    }

    .decor-single-quote {
        display: block;
    }
}

These work when the page is zoomed on a desktop but when I load it on mobile, it doesn't. I've also included this meta tag in HTML-

<meta name="viewport" content="width=device-width, initial-scale=1.0">

I'm using flex from bootstrap-4 so I can't use d-sm-none. (It affects the design)

Can someone explain why it isn't working? thanks!

Answer 1

Most phone screen sizes are below 576px (which is the min width that you have listed right now. A common breakpoint for a mobile layout would be:

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

There a various sites that go into pixel density on phones and breakpoints for each specific mobile phone.

https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/