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!

score 3 · Accepted Answer · answered Dec 13 '17 at 18:17

3

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/

answered Dec 13 '17 at 18:17

Kristina Darroch

171
10

This worked. Thanks! Also, what is 'only screen'? seems to work without it. – GradDev Dec 14 '17 at 11:45
1

https://stackoverflow.com/questions/8549529/what-is-the-difference-between-screen-and-only-screen-in-media-queries – Kristina Darroch Dec 15 '17 at 19:04
^ that explains it well – Kristina Darroch Dec 15 '17 at 19:05

Johannes · Answer 2 · 2017-12-13T15:49:48.987

1

If that's all the CSS you have, there are no media queries for screens below 576px width, so if you open it on a mobile phone less than 576px wide, the default styles apply (which is display: block)

edited Dec 13 '17 at 15:49

answered Dec 13 '17 at 15:25

Johannes

64,305
18
73
130

Media queries work when zoomed on desktop but not on mobile

2 Answers2