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...
Related
This question already has answers here:
Why media queries has less priority than no media queries css
(2 answers)
Closed last year.
In the media query I aske to position nav bar at the bottom and remove the margin-lef of the main section.
The media query make the job for the nav bar but not for the margin-left.
https://codepen.io/ALL9000/pen/yLzQKmv?editors=1000
What’s wrong. ?
#media (max-width: 777px) {
nav {
display: block;
position: static;
text-align: center;
width: 100%;
}
#main-doc {
margin-left: 0px;
}
}
You simply have to put the media-query at the end of the CSS.
You default styling for #main-doc comes after the media-query, so overrides it.
It should look like this:
#main-doc {
margin-left: 290px;
}
#media (max-width: 777px) {
nav {
position: static;
width: 100%;
}
#main-doc {
margin-left: 0px;
}
}
As you define the #main-doc {margin-left: 290px;} after the #media query it overwrites the media. if you open your browser developer console you can see the #media appears in smaller sizes but does not take effects. so you can just move the #main-doc {margin-left: 290px;} before #media or use the !important keyword to tell the browse 'whenever this media appears its more important. It's a best practice not to use !important too much cuz it can overwrite and cuz damage somewhere else.
#main-doc {
margin-left: 290px;
}
#media (max-width: 777px) {
nav {
display: block;
position: static;
text-align: center;
width: 100%;
}
#main-doc {
margin-left: 0px;
}
}
OR
#media (max-width: 777px) {
nav {
display: block;
position: static;
text-align: center;
width: 100%;
}
#main-doc {
margin-left: 0px !important;
}
}
#main-doc {
margin-left: 290px;
}
I'm sorry i know it's been asked before but i just can't figure why it doesn't work!
I have the meta tag viewport in the head
I have a display:none icon (bars) at wide viewports (i started from there) and it should appear at smaller size when the menu disappears. (menu disappearing works)
I've set it to display:block
My SCSS:
.fa-bars {
display: none;
}
#media screen and (max-width: 600px) {
.container {
.fa-bars {
display: block;
}
}
}
But it doesn't work i don't know why
tried to select it with just *i*, with the class, i don't know please send help.
In your media query, this won't work:
.container{
.fa-bars{
display: block;
}
}
It should either be:
.container .fa-bars {
display:block;
}
... if it's important that the .fa-bars is in .containers.
Otherwise this will be fine:
.fa-bars {
display:block;
}
you need SCSS for nesting blocks,
trying doing it like this:
.fa-bars{
display: none;
}
#media screen and (max-width:600px){
.container.fa-bars{
display: block;
}
Enclose both in media queries and correct your css syntax. try this:
#media screen and (min-width:601px){
.fa-bars{
display: none;
}
}
#media screen and (max-width:600px){
.container .fa-bars{
display: block;
}
}
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 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
I'm fairly new to the world of scripts and coding, so I do not know the best terms to use.
I am trying to make a somewhat simple website, and I want my header background to have padding-bottom 120px at min-width 600px, and 0 at 1050. However, the padding-bottom only updates when changed in the properties for header.
Here is my code:
header {
border-radius: 5px;
display: block;
width: auto;
min-height: 200px;
background: #E44;
padding-top: 40px;
padding-left: 38px;
padding-right: 38px;
padding-bottom: 136px;
}
#media screen and (min-width: 600px) {
.header {
padding-bottom:120px
}
}
#media screen and (min-width: 1050px) {
.header {
padding-bottom: 0px;
}
}
The padding-bottom stays at 136px no matter the min-width of the window.
Make sure that you know the difference the dot does. .header is selection the header class. While header selects the element. Your code works fine, as you can see here, I'm using the media queries to change the background color instead of padding, just to make the point clear.
Fiddle example
header {
border-radius: 5px;
display: block;
width: auto;
min-height: 200px;
background: #E44;
padding-top: 40px;
padding-left: 38px;
padding-right: 38px;
padding-bottom: 136px;
}
#media screen and (min-width: 600px) {
.header {
background-color: blue;
}
}
#media screen and (min-width: 1050px) {
.header {
background-color: green;
}
}
<header class="header">
</header>
There is a small typo here. You have an additional dot(.) which will mean a class selector as against the other style which is on element selector.
#media screen and (min-width: 600px) {
header {
padding-bottom:120px
}
}
#media screen and (min-width: 1050px) {
header {
padding-bottom: 0px;
}
}