I'm trying to validate my CSS. My main stylesheets come back with no errors, but I have mobile.css, tablet.css, and laptop.css with media queries and they're all returning a "unrecognized media only" message when I go to validate.
Here's my mobile.css:
#media only screen and (min-width : 320px) and (max-width : 500px) {
.container {
width: 100%;
}
header {
width: 100%;
height: 100px;
background-size: 100%;
background-repeat: no-repeat;
}
.content {
width: 90%;
}
footer {
width: 100%;
}
nav {
display: none;
}
}
The other files/media queries are very similar (different min-widths, etc.).
The validator says:
Sorry! We found the following errors (2)
1 unrecognized media only
20 Parse Error screen and (min-width : 320px) and (max-width : 500px) { .container { width: 100%; } header { width: 100%; height: 100px; background-size: 100%; background-repeat: no-repeat; } .content { width: 90%; } footer { width: 100%; } nav { display: none; } }
As you said in the comments, you use css-validator.org.
When I validate your css there (css-validator.org) it says it validates for CSS level 2.1. Media query's are not in CSS since version 3 so that's why the validation fails.
If you use the W3 css validation (jigsaw.w3.org/css-validator) it shows no errors while validating for CSS version 3 + SVG
Related
So im just testing some media queries for scss in my webpack project.
I've just got a simple div within the body, and want the background to change depending on the width of the screen.
My two smallest media queries, small & xsmall, just don't apply, and I can't figure out why.
No matter how narrow I make the screen, the background stays green below 900px
$xsmall: 300px;
$small: 600px;
$medium: 900px;
$large: 1200px;
$xlarge: 1500px;
$xxlarge: 2000px;
body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
.test-class {
width: 100%;
height: 100%;
#media (min-width: $xsmall) { <--- Doesn't Apply
background-color: purple;
}
#media (min-width: $small) { <--- Doesn't Apply
background-color: pink;
}
#media (min-width: $medium) {
background-color: green;
}
#media (min-width: $large) {
background-color: yellow;
}
#media (min-width: $xlarge) {
background-color: blue;
}
#media (min-width: $xxlarge) {
background-color: orange;
}
}
}
Sorted it.
Was using a generic HTML boilerplate and not the full one provided by VSCode.
Added:
<meta name="viewport" content="width=device-width, initial-scale=1">
to the header and that resolved it.
So I am at the beginning, doing different tutorials and challenging myself with conquering the fundamentals. I know this might seem lowkey for most people but be gentle, i'm sorta new to this.
I tried using Media Queries 4 for example #media (30em <= width <= 50em ) { ... } but it jsut doesn't work for me (browser compatibility is checked btw) so I went with a classic code writing (which you may see below). Unfortunately my divs will not scale properly, I am clearly missing something like a parent-child not sharing the proper settings but I can't see it. Could you point out my mistake please? All it needs to do is scale the divs if the width is lower than 600, between 601 and 960 and above 961 (obv .px)
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Mobile Styles */
#media only screen and (max-width: 600px) {
body {
background-color: #F09A9D;
}
}
/* Tablet Styles */
#media only screen and (min-width: 601px) and (max-width: 960px) {
.sign-up,
.feature-1,
.feature-2,
.feature-3 {
width: 50%;
}
}
/* Desktop Styles */
#media only screen and (min-width: 961px) {
.page {
width: 960px;
margin: 0 auto;
}
.feature-1,
.feature-2,
.feature-3 {
width: 33.3%;
}
.header {
height: 400px;
}
}
.page {
display: flex;
flex-wrap: wrap;
}
.section {
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.menu {
background-color: #5995DA;
height: 80px;
}
.header {
background-color: #B2D6FF;
}
.content {
background-color: #EAEDF0;
height: 600px;
}
.sign-up {
background-color: #D6E9FE;
}
.feature-1 {
background-color: #F5CF8E;
}
.feature-2 {
background-color: #F09A9D;
}
.feature-3 {
background-color: #C8C6FA;
}
The html is just a bunch of divs with an img src inside them. The output is the same no matter what the size of the browser window is.
#sbrrk is right. And also, you should write your media queries at the very bottom, so they will override other rules of the same specificity
I have a flex-box grid of divs.
I want to change width of that div (in %) depending on screen size.
My scss #media:
#media (max-width: 1023.9px) {
width: 33.3333%;
}
#media (max-width: 768px) {
width: 50%;
}
#media (max-width: 599px) {
width: 100%;
}
#media (min-width: 1024px) {
width: 25%;
}
But when I test that in Chrome's Responsive tool, I got only this:
Case of 500px width, It doesn't change,
When I change my screen size to 1020, it's OK, max-width: 1023.9px is working.
1200 is OK, min-width: 1024px is working. But less than 1024 - I get that strange things. What do I do wrong?
Generated css for my grid-class:
.image-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
width: 100%;
background-color: #f6f6f6; }
.image-grid .image-wrapper {
width: 25%;
position: relative; }
.image-grid .image-wrapper::before {
display: block;
content: '';
width: 100%;
padding-top: 88.23529%; }
#media (max-width: 1023.9px) {
.image-grid .image-wrapper {
width: 33.3333%; } }
#media (max-width: 768px) {
.image-grid .image-wrapper {
width: 50%; } }
#media (max-width: 599px) {
.image-grid .image-wrapper {
width: 100%; } }
#media (min-width: 1024px) {
.image-grid .image-wrapper {
width: 25%; } }
Hmm, now It works fine when I resize my browser window, I normally get my 1 column with 550px and 2 columns with 700px. Question is answered, but in "Responsive" tool 550px and 700px still not working. Maybe I don't understand the tool.
Finally solved. The problem was totally dumb: I forgot adding meta tag, so Responsive tool didn't work properly. Don't forget about that important line. <meta name="viewport" content="width=device-width, initial-scale=1.0">
Every rule in CSS is able to override any previous rule to the same selector. So you just need to switch your code in order to get it working:
#media (max-width: 1023.9px) {
width: 33.3333%;
}
// experimental
#media (max-width: 1000px) {
width: 50%;
}
#media (max-width: 768px) {
width: 50%;
}
#media (max-width: 599px) {
width: 100%;
}
//
#media (min-width: 1024px) {
width: 25%;
}
The reason why your rules override each other is because they all have the same selector and while max-width: 599px is accurate and correct, the later appearing max-width: 1023.9px is it, too and thus it’s overriding the previous width: 100%; from the max-width: 599px media query.
And a side note here: Use integer values only for media queries. There is no screen in the world, which has .9 or even .5 pixels.
CSS is the acronym of Cascade Style Sheet.
This means that rules are matched in a cascade fashion. If you have a viewport width between 1000 and 1024, the 33.3333% is the last that matches and it will be applied, overriding all the previous.
Once you know it, you can change your code in a proper way. If you don't want to re-think your code, you can prevent the overriding using !important.
#media (max-width: 1000px) {
width: 50% !important;
}
Warning: Using !important is a bad practice, the reason is here
I'm getting really frustrated by this...
MDN example media query:
#media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
My media query:
#media (max-width: 1000px) {
.nav-content {
width: 90%;
margin-left: 5%;
}
}
It's not working...
Things I have checked for:
Query is after original .nav-content declaration
The class is the right name
Spelling is correct
The original CSS
.nav-content {
width: 80%;
margin-left: 10%;
display: inline-block;
}
Here's a link to a codepen: http://codepen.io/sbhenrichs/pen/ZOjyrm
But when I shrink the browser down to less than 1000px, nothing is happening!
PLEASE HELP
You have this CSS rule in a style tag inside your (HTML) head:
.nav-content {
width: 75%;
margin-left: 12.5%;
}
This overwrites the rules in all external style sheets...
Hello guys I am using the following code to show and hide some elements but it seems to doesn't work on mobile devices.
#media screen and (max-width: 768px) and (orientation : portrait) {
.drawer1 {
display: block;
top: 789px;
}
.drawer {
display: none;
}
.drawer1-content {
background: #fff;
background-repeat: no-repeat;
border-collapse: collapse;
height: 645px;
width: 100%;
}
}
#media screen and (min-width: 769px) {
.drawer {
bottom: 0px;
height: 700px;
overflow: hidden;
position: absolute;
width: 1024px;
z-index: 5;
}
.drawer1 {
display: block;
}
..from the code you posted, looks like you miss a } at the end..
Also check if your device has a width less than 768px in the first case
and it has a width more than 769px in the second case (landscape or portrait)
try one of the several extensions available on Chrome/Firefox/Opera to set the max width of the viewport and simulate a mobile device..
From the comment:
so from the specs: IPAD 3gen: 2048-by-1536 pixel....here you have your answer :D just change the max-width and min-width ..or just use the landscape and portrait attributes