CODEWITHSUNDEEP
cssmedia-queries
Craig Jacobs
Craig Jacobs

Reputation: 1071

CSS Media Queries not matching max / min widths precisely

Here is the CSS:

@media only screen and (min-width : 971px) and (max-width : 1224px) {
    main #titlebox{
        height: 300px;
    }
}

@media only screen and (min-width : 785px) and (max-width : 970px) {
    main #titlebox{
        height: 250px;
    }
}

@media only screen and (max-width : 784px) {
    main #titlebox{
        height: 225px;
    }
}

The problem is that when resizing the browser, the the media queries are not applied when expected. For example, starting with the browser very wide (> 1300px) and then slowly decreasing the width of the browser, the first media query doesn't get applied until the element is approx. 1209px wide. I would expect that it would apply as soon as the width became 1224px. Likewise, the next one isn't applied until Approx 955px not 970px, and so on. I have tested this behavior in both chrome and firefox.

Upvotes: 1

Views: 2053

Answers (1)

Cutter
Cutter

Reputation: 121

Check your zoom-level in your browser. In Firefox your zoom-level affects your webpage but not the displayed screen sizes in the dev-tools.

Upvotes: 12

Related Questions