I have written a piece of CSS code to fluidly switch my site layout's width based on the user's screen width. If the user has less screen estate available, the layout's width increases to fill more of the window and leave less whitespace, and if they have more space, the layout shrinks to maintain an appealing look.
I use the following code to achieve this:
#bg{
background:-webkit-linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
background:-moz-linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
background:-o-linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
background:linear-gradient(90deg, #0f0f0f 0%,#222222 400px);
margin-left:auto;
margin-right:auto;
margin-bottom:1.6rem;
border-width:0 0.1rem 0.1rem 0.1rem;
border-style:solid;
border-color:#303030 #101010 #000;
border-radius:0.8rem;
min-width:94.2rem
}
@media (min-width: 70rem){
#bg{
border-radius:4px;
border-radius:0.4rem;
width:90%
}
}
@media (min-width: 91rem){
#bg{
width:80%
}
}
@media (min-width: 112rem){
#bg{
width:70%
}
}
This works just fine in Firefox 30, however Google Chrome always displays the element at 70% width.
Previously, I had also used max-width in the queries, in which case Chrome would do the inverse thing; it would always display the element at 90%, no matter how much I resize the browser window.
The rules are compiled using SASS. What exactly is the problem here? How can I alter the query to work in all browsers?
The affected website can be found at this link.
add this line in <head>
<meta name="viewport" content="width=device-width,initial-scale=1">