Menu
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.
777
Media Query Not Working on Mobile Devices If media queries work on desktop and not on mobile devices, then you most likely haven't set the viewport and default zoom. Note: You only need to add one of the code lines above, and usually, the first one does the job.
Activate Media Query Tool To enable it: go into responsive design mode. click the three dots menu in the top right of the screen. click "show media queries"
Mobile Media Query Not Working If your queries are working in a browser but not on mobile, you might have forgotten to set the viewport and default zoom. This tells the browser to render pages according to the width of the device. Adding it often does the trick for making mobile breakpoints work.
add this line in <head>
<meta name="viewport" content="width=device-width,initial-scale=1"> If you're using Chrome (or any browser) on a desktop, the browser zoom should be 100%. No more or no less. Otherwise, responsive doesn't work (use Ctrl + scroll in Windows, or Cmd +/- in Mac to adjust).
24
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
