CODEWITHSUNDEEP
htmlcssmedia-queries
user1231561
user1231561

Reputation: 3359

Elements position fine in media-query: 380px - but not when resized from bigger width and down to 380px

So I have two media queries: MQ1. @media screen and (max-width: 380px) and MQ2. @media screen and (max-width: 768px).

  1. When I run my browser in a start width equaling to MQ**1**. everything looks fine. If I then trigger MQ2 (by resizing the browser wider). then MQ2. looks weird.

  2. When I run my browser in a start width equaling to MQ**2**. everything looks fine. If I then trigger MQ1 (by resizing the browser less wide). then MQ1. looks weird.

I am experiencing this behaviour in Crome, IE and on Iphone. For some reason it doesn't persist in Firefox.

My thought was that it could be an issue related to:

Could seem like a webkit issue, but not sure. Any ideas to what could be causing this issue?

I've put together a simplified test of all HTML/CSS here: http://codepen.io/anon/pen/HDvap

You can try resizing as mentioned in point 1 + 2 above and you will see the elements positioned differently from example to example.

TEST NOTE 1: When resizing down to 380px; (from wide width) notice that the black button will wrongly position/overlap upon the graphics for "text1"+"text2" and the whole content container will appear closer to the top.

TEST NOTE 2: When reloading in 380px; the black button will appear just fine

EDIT NOTE 1: I tried removing all related to animation in the CSS and the media queries worked perfectly. So could be a webkit specific issue with -webkit-animation-fill-mode: forwards;

Upvotes: 0

Views: 608

Answers (1)

NoobEditor
NoobEditor

Reputation: 15921

This is because @media screen and (max-width: 768px) will overwrite @media screen and (max-width: 380px) as the condition in your 2nd MQ cover the condition of your 1st MQ...to avoid this conflict, instead of only min use both min and max for your MQ

@media (min-width: 380px) and (max-width: 768px) {
    /*
     styles only in range of 380 - 768px here
    */

  }

@media screen and (max-width: 768px) {
    /*
     styles only in range of > 768px here
    */

  }

For same issue, I've added an answer today, you can check the explanation here : Media query css file not detecting

Upvotes: 1

Related Questions