Hello! In an effort to implement a responsive design in my "mobile-only-first-until-I-have-time-and-or-resources-to-develop-an-equivalent-desktop-site", I set up the most simple HTML/CSS setup I could think of:
HTML:
<html lang="en-US">
<head>
<title>TIIIIITLE!!</title>
<link rel="stylesheet" href="styles/test-style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
Here is my text, yo!
</body>
</html>
CSS:
@media screen and (min-width >= 80rem) {
body {
background: #F0F;
}
}
From what I understand, using Chrome's developer tools responsive resolution tool, the page background should turn pink after a certain width is displayed, but that doesn't seem to be happening. It shows that the CSS is loading, but the display isn't responding to width changes.
Can someone please explain to me what I'm getting wrong?
Thank you!
What is that
u/?Ah, apologies, that was not part of my code - that accidentally got pasted in the post.
*edited* thanks for pointing that out!
It is
@mediafor one thingAck, you're absolutely right, there. I just added it, but it didn't yield any change, unfortunately.
Oh the media query should use =
I edited the CSS line to
but that didn't seem to help
(as an aside, I found that the "code block" format of Reddit automatically changes the "@" to "u/"
I'll have to keep an eye out for that in the future)
Ah, I found it - I needed to use a colon instead of an equal sign in the media query.
Thank you u/33ff00 , for being a second set of eyes!
D’oh misled you! Sorry
No worries! This has been (and will continue to be) a learning experience, and I appreciate you taking the time to help.
You were mushing together the traditional media query with the new “range syntax”.
https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Code_style_guide/CSS#media_queries
You can use the less than or greater than signs now, < or > (on some browsers), but you use the with ‘width’.
Eg @media (width > 800px) {…}
In English think of this as “show these styles when the width is greater than 800px.
The original and still widely used syntax is:
@media (min-width:800px) {…}
In English. Show these styles when the browser hits a minimum width of 800px.
This explains a ton- thank you for helping me understand this better!