Safari Ignoring CSS Max-Width Media Queries Below a Certain Point

Safari ignoring css max-width media queries below a certain point

Turns out I was missing a squiggly brace, so I had code like the following:

@media screen and (max-width: 767px){
    /* lots of css */
    .some_selector { padding: 20px; /*<---- missing squiggly brace*/
    /* more css */
}
@media screen and (max-width: 640px){
    /* lots more css */
}

Inserting the missing brace caused Safari to begin working. Other browsers didn't choke on the error which is partially why it was so difficult to track down.

Thanks for the help everyone, I feel pretty silly now.

Chrome, Safari ignoring max-width in table

Max-width applies to block elements. <table> is neither block nor inline. Ambiguous enough? haha. You can use display:block; max-width:1000px and forget about width:100%. Chrome and Safari follow the rules!

Edit May 2017: please note, this comment was made 7 years ago (in 2010!). I suspect browsers have changed a bunch over the years (I wouldn't know, I no longer do web design). I recommend using a more recent solution.

Safari and media query for mobile

In your stylesheet, main.css, the first 2 media queries are each missing their closing curly-brace. This is causing them to nest and be misinterpreted by Safari. In the formatted CSS:

1. after line 980 add, }
2. and after line 1227 add, }

---

Related Topics