CODEWITHSUNDEEP
htmlcss
Marc Hoover
Marc Hoover

Reputation: 97

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!

Upvotes: 0

Views: 818

Answers (2)

trungvose
trungvose

Reputation: 20034

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;
    }
}

Upvotes: 1

Bruno Vincent
Bruno Vincent

Reputation: 545

Get firefox portable at :

http://portableapps.com/apps/internet/firefox_portable

Then use CTRL+Shift+M to get the mobile emulator.

Much better than the chrome one.

The chrome one gets affected by addons and is buggy, the firefox one with a fresh install works 100% and is very fast for real time resizing also, great to show clients

Upvotes: 1

Related Questions