css - Responsive media query not working in Google Chrome -
css - Responsive media query not working in Google Chrome -
i have written piece of css code fluidly switch site layout's width based on user's screen width. if user has less screen estate available, layout's width increases fill more of window , leave less whitespace, , if have more space, layout shrinks maintain appealing look.
i utilize next code accomplish 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 fine in firefox 30, google chrome always displays element @ 70% width.
previously, had used max-width in queries, in case chrome inverse thing; display element @ 90%, no matter how much resize browser window.
the rules compiled using sass. problem here? how can alter query work in browsers?
the affected website can found at link.
see if more usual syntax works better:
@media screen , (min-width: 112rem){ ... }
css google-chrome firefox width media-queries
Comments
Post a Comment