Search code examples
htmlcssmedia-queriesflexbox

Media query being executed after it should

I am working with flex items so I think it could be the problem of why my code is making a strange behaviour.

I have .flexContainer class that has a max-width property. After I resize the window, I want to change this max-width property to a higher value but if I set my media query as:

@media screen and (max-width: 850px){
    .flexContainer{
       max-width: 60%; 
    }
}

the max-width of the element is changing at 835px instead of 850px.

Here is my code:

HTML:

<div id="container">
  <div id="left" class="block">Left</div>
  <div id="center" class="block">
    <div class="flexContainer">
      <div class="flexDiv"></div>
    </div>
    <div class="flexContainer">
      <div class="flexDiv"></div>
    </div>
    <div class="flexContainer">
      <div class="flexDiv"></div>
    </div>
  </div>
  <div id="right" class="block">Right</div>
</div>

CSS:

html, body{
    width: 100%;
    height: 100%;
}

#container{
    display: flex;
    height: 100%;
    background-color: blue;
}

.block{
    flex: 1;
}

#left{
    background-color: green;
}

#center{
    display: flex;
    flex: 1;
    flex-wrap: wrap;  
    align-content: flex-start;
}

#right{
    background-color: orange;
}

.flexContainer{
    flex: 1;
    min-width: 100px;
    max-width: 50%;
    box-sizing: border-box;
    height: 150px;
    background-color: red;
    padding: 10px;
}

.flexDiv{
    width: 100%;
    height: 100%;
    background-color: yellow;
}

@media screen and (max-width: 850px){
    .flexContainer{
       max-width: 60%; 
    }
}

JSFiddle in which you can see that the max-width property changes at 835px instead of 850px.

EDIT: I add two screenshots so you can see it:

enter image description here

enter image description here

Why the media query is being executed after it should?

Solution

  • I found my problem here. Just I had to remove the margin of the body tag.

    I will try to reproduce the effect that I am having on my real project (in which I have body tag fixed) and edit the question again.

    EDIT: It seems that it was a bug or something similar of Google Chrome because I cannot reproduce the error anymore.

    The error that I was getting is that when I looked at html tag on my Google Chrome inspector, it gave to me the wrong values for the webpage (around 30px less, and I do not have any padding/margin around it) so I thought that the media queries were being executed in the wrong width of the screen.

    I know this is a "stupid" solution but it worked again when I closed and re-opened Google Chrome. Now it works like normal behaviour.