CSS - Media Query max-width set to hide div at 729px but hides at 657px

Question

I have a media query:

        @media only screen and (max-width : 729px) {
        .playertracklist{
            display:none;
        }
        }

but when i resize my window the css media query gets applied when the width reaches 657px. Im using Chrome and the scale of the window is correct meaning im not zoomed in or out.

Did you try inverting the statement, e.g. using `min-width` and `display: block`? — Jan Wirth, Nov 12 '15 at 12:59
Could you once try to remove the "Only" and just write @media screen and (max-width : 729px). There is a difference between screen and only screen... maybe this will help you out — Marcel Wasilewski, Nov 12 '15 at 13:00
works now i zoomed in and the media query works, guess i did zoom out — IFDev, Nov 12 '15 at 13:03

score 1 · Accepted Answer · edited May 23 '17 at 12:15

If you want it to hide at 729px exactly you could try using width instead of max-width.

If you want it to hide from 729px and above(which would guess you'd want) it might be better to tell the CSS to start hiding above 729px, and not below, as you are doing now.

If you change

 @media only screen and (max-width : 729px) {

to

 @media only screen and (min-width : 729px) {

it should work.

As Marcel W, said you could leave the only part away. It makes small difference for newer browser, but it makes a big difference in older browsers.

The only part gets ignored by older user agents as they don't reconize the property, thus letting you hide that part of the stylesheet from them. A newer user agent just ignores it and continues with the rest of the media query. Meaning that it is up to you to decide if you will or won't use it. If you want more info over only check this link

CSS - Media Query max-width set to hide div at 729px but hides at 657px

1 Answers1