Marc Hoover Marc Hoover - 1 month ago 8
CSS Question

Using Chrome Devtools, I have the resolution @ 1680px, but a min-width:1440px media query is not working

So my customer screen is @ 1680px, but screen is 1200px, so I have to use Chrome's Devtools to emulate a larger screen. I created a media query in my css file:

@media (min-width: 1440px)


But Chrome is using the smaller query when I have the resolution set to 1680px in Devtools:

@media (min-width: 1200px)


I don't know if its Devtools, or Chrome, or something I did. The page im working on is http://www.becoming1percent.com/ and only section I have so far with that larger media query is the section that says "The Entrepreneurs Monthly Book Box", and the div its in (the class is .hero-content). Please help!

Answer

It depends on how did you order your query. I saw your code is

@media (min-width: 1440px) {
    #index-hero .hero-content {
        margin: -300px auto 15px;
    }
}


@media (min-width: 1200px) {
    #index-hero .hero-content {
        margin: -60px auto 15px;
        /*text-align: left;*/
        width: 50%;
    }

    #index-hero {
    min-height: 900px;
    margin-top: -50px;
    }
}

So basically browser will apply @media (min-width: 1440px) first then override it with style defined in @media (min-width: 1200px).

min-width is often used for mobile first approach so everything will go from smaller to larger screen, for example mobile -> tablet (min-width: 480px) -> normal desktop (min-width: 768px) -> large screen (min-width: 1024px)

So I suggest you re-order the stylesheet, bring 1440px down below 1200px.

Or you can define the max-width to control deeply.

 @media (min-width: 1440px) {
    #index-hero .hero-content {
        margin: -300px auto 15px;
    }
}


@media (min-width: 1200px) and (max-width: 1439px) {
    #index-hero .hero-content {
        margin: -60px auto 15px;
        /*text-align: left;*/
        width: 50%;
    }

    #index-hero {
    min-height: 900px;
    margin-top: -50px;
    }
}
Comments