Here's my code:
#media (max-width: 480px) {
.content {padding:4px;}
}
#media (min-width:481px){
.content {padding:10px;}
}
It works properly. But, it doesn't work as I intend when I change it like the below:
#media (max-width: 480px) {
.content {padding:4px;}
}
.content {padding:10px;}
I intended to make ".content {padding:10px}" a default style. Only screen width less than equal to 480px uses ".content {padding:4px}".
With the default style last as in your example, it will override anything that has already been set. CSS is processed from top to bottom and any properties specified more than once will take the last specified value.
Therefore, put the default style first. This way if the #media query matches, it will override the already-set default style of 10px.
.content {padding:10px;}
#media (max-width: 480px) {
.content {padding:4px;}
}
Related
Working a lot now with CSS media queries, I wondered in which order it's best to use them.
Method 1
#media only screen and (min-width: 800px) {
#content { ... }
#sidebar { ... }
}
#media only screen and (max-width: 799px) {
#content { ... }
#sidebar { ... }
}
Like this obviously the code is shorter, but with a lot of CSS you end up having the CSS of one container spread to multiple places in your stylesheet.
Method 2
#media only screen and (min-width: 800px) {
#content { ... }
}
#media only screen and (max-width: 799px) {
#content { ... }
}
#media only screen and (min-width: 800px) {
#sidebar { ... }
}
#media only screen and (max-width: 799px) {
#sidebar { ... }
}
Like this if you specify the screen size (at which the CSS is active) for each container a new, the overview in my humble opinion is much better.
But with a lot of CSS you will use the #media query dozens and dozens times.
Does the second method cause significantly longer load time or has any other disadvantages?
EDIT:
I might have been not clear enough. My question doesn't really concern the order or the queries as such or about overwriting CSS declarations.
What I wonder about is rather the norms how other people include the media query "statments" into their css.
Lets say I have only one breaking point where I switch some CSS.
So I have one media query for min:800px and a second for max:799px.
Should I use both query "statements"
#media only screen and (min-width: 800px) { ... }
#media only sreen and (max-width: 799px) { ... }
only once in my whole stylesheet and include ALL the CSS for ALL containers into the two media query "statments"?
Or is it okay as well to use the media query "statments" mutiple times?
I mean instead of making two seperate areas in the stylesheet (one for CSS above and one for below 800px), if there are any concerns about the method of using the media query "statments" instead multiple times (for each part of the page again, like for Content, Widgets etc to make them responsive)?
I would just like to have the CSS for above and below 800px in two different parts of my stylesheet.
I know that ofc both methodes are working, I am jsut curious about the norms and if using the media query "statements" dozens or hundreds of times within a CSS sheet (instead of just twice in the case I jsut mentioned) will increase the loading times?
My answer on how you should use media queries can be applied to your question:
Here is how you should use media queries:
Remember use the sizes you like/need. This below is just for demo
purposes.
Non-Mobile First Method using max-width:
/*========== Non-Mobile First Method ==========*/
#media only screen and (max-width: 960px) {
/*your CSS Rules*/
}
#media only screen and (max-width: 768px) {
/*your CSS Rules*/
}
#media only screen and (max-width: 640px) {
/*your CSS Rules*/
}
#media only screen and (max-width: 480px) {
/*your CSS Rules*/
}
#media only screen and (max-width: 320px) {
/*your CSS Rules*/
}
Mobile First Method using min-width:
/*========== Mobile First Method ==========*/
#media only screen and (min-width: 320px) {
/*your CSS Rules*/
}
#media only screen and (min-width: 480px) {
/*your CSS Rules*/
}
#media only screen and (min-width: 640px) {
/*your CSS Rules*/
}
#media only screen and (min-width: 768px) {
/*your CSS Rules*/
}
#media only screen and (min-width: 960px) {
/*your CSS Rules*/
}
Here is a good tutorial from W3.org
Based on your edited question:
I guess this depends on each developer and how they need/think to develop his/her project.
Here is what I use to do ** (when not not using Pre-compliers)**:
I create a file styles.css which includes the general styles that will apply to the project like this:
/*========== All Screens ==========*/
{
/*General CSS Rules*/
}
Then having the media queries below, either using the non-mobile or mobile approach method explained above (in my case I usual use the non-mobile approach method).
But, depending on the projects you may need to have some other breaks besides the "standard" which can led you to use the rules in the way you mentioned.
Plus there are developers who prefer to separate into 2 files, the one with general styles CSS and other one with media queries styles.
Important: There is one difference from creating a file with general styles + 1 media queries (min-width:800px or max-width:799px), then only having a file with 2 media queries (min-width:800px/max-width:799px), which is when you have the general rules it will apply to ALL widths, therefore you just need to set the rules for 1 media queries.
Based on your last comment, the answer I could give you would be opinion-wised, so the best I can do for you is to give you a few articles so you can have your own opinion on this topic:
How many media queries is too many?
Web Performance: One or thousands of Media Queries?
Debunking Responsive CSS Performance Myths
It means that, if you apply two rules that collide to the same elements, it will choose the last one that was declared, unless the first one has the !important marker
The second one will always display the content at 799px and whatever content has been styled as the style allocated for 799 rather than 800px if the device is 800px, in this case because it's 1px difference it doesn't make much different, but if you did it at around 200px different it would cause problems for your design.
Example:
if you have it this way:
#media (max-width: 800px) {
body {
background: red;
}
}
#media (max-width: 799px) {
body {
background: green;
}
}
The background would be green if the device is 799px in width or less.
if it was the other way round
#media (max-width: 799px) {
body {
background: red;
}
}
#media (max-width: 800px) {
body {
background: green;
}
}
if the device width was less than 799px the background would be green because no !important keyword has been defined.
when the !important keyword has been defined, result for example one will be the same
#media (max-width: 799px) {
body {
background: red; !important
}
}
#media (max-width: 800px) {
body {
background: green;
}
}
It won't take the processor longer unless the two elements collide. You'll be fine to vary min-width and max-width.
I suggest you to use the first method.
If you are developing a site mobile first then you won't need media queries for mobile but for tablet and desktop only.
//Mobile first
.your-mobile-styles-also-shared-with-tablet-and-desktop{
}
//Tablet
#media only screen and (min-width: 641px) {
#content { ... }
#sidebar { ... }
}
//Desktop
#media only screen and (min-width: 1025px) {
#content { ... }
#sidebar { ... }
}
If you are using a CSS pre-processor like SASS or LESS you can always create many LESS or SASS components that you will include in your main.less or main.scss / .sass file.
So each component will have not so many media queries and you can divide each component with some comments like shown above.
Your code this way will be easier to read and also much shorter, because all properties shared by tablet and desktop can be defined at the beginning of you CSS component file.
This question already has answers here:
CSS media queries - Order matters?
(3 answers)
Closed 8 months ago.
So I understand the (min-width: 1400px) and (max-width: 1400px) are break points for when the CSS reaches those breakpoints it supposed to go back to its default sizing.
This is what I have done. I have my main CSS file that has its default sizing and another CSS file called query.css that controls the responsiveness of the web page.
This is how I have certain parts of both files to adjust accordingly
main CSS
.h1,.h2,.h3 {
font-size: 70px;
font-family: Cinzel, sans-serif;
}
.nav-link {
padding-left: 10rem !important;
}
query CSS
#media (min-width: 1400px) {
.h1,.h2,.h3 {
font-size: 1em;
}
.nav-link{
padding-left: 5em !important;
}
}
This is where it confuses me. The main CSS file settings are meant to be the main one, but the query CSS seems to overwrite the main CSS and it really messes up when I try and do responsive design.
I get that this min-width:1400px is meant to say if it goes from 2000px down to 1400px it must keep the min-width:1400px, but then what is the point of having the main CSS if the min-width:1400px just negates the main CSS file settings.
Its very frustrating working like this.
... it must keep the min-width:1400px ...
That's not how min-width works with media queries.
The min-width rule effectively says "apply this block of CSS if the viewport is at least this wide", in this case at least 1400px. if the viewport width is less than 1400px then the CSS surrounded by the media query will not be applied and the styles defined in main.css will take precedence.
#media (min-width: 1400px) {
/* CSS that is only applied if the viewport is >= 1400px */
}
Also, be careful about the order that the CSS files are included in the page. If query.css was included before then the media query it contains would always be over-ruled by the CSS in main.css.
It's a little more complicated than this when you take specificity in to account, but you should get the general idea.
For more info, take a look at the documentation for the media query min-width rule.
An important aspect of media-queries is structuring them correctly - especially if you're using a combination of #media (min-width: x) and #media (max-width: x).
CSS is read from top to bottom - this means that the last property applied to your desired selector will take priority, as long as its valid. This means that a more "precise/accurate" media-query rule prop will not take priority over another, if the media-query is placed below the other and both of their rules are valid. This means you can't just throw in media-queries at random locations in your CSS-file, because the CSS is just going to be overwritten.
Note that this doesn't apply on more specific selectors, but in my personal preference, I don't like mixing the specificity on a selector across multiple media-queries.
Because of this, you should always make media-query-rules with:
A descending pixel value if you're using max-width
An ascending pixel value if you're using min-width
In this example, the min-width-media-queries below the max-width-media-queries
This way, the first media-query will always take priority as long as its rules apply. When the second media-query's rule apply, that will take priority instead and so on. Try dragging the screen size of this code snippet in full page and you'll see how this code structuring works.
div {
width: 150px;
height: 150px;
background-color: red;
}
#media screen and (max-width: 412px) {
div {
background-color: green;
}
}
#media screen and (max-width: 360px) {
div {
background-color: yellow;
}
}
#media screen and (min-width: 320px) {
div {
background-color: orange;
}
}
#media screen and (min-width: 414px) {
div {
background-color: black;
}
}
#media screen and (min-width: 428px) {
div {
background-color: purple;
}
}
#media screen and (min-width: 768px) {
div {
background-color: pink;
}
}
#media screen and (min-width: 800px) {
div {
background-color: gray;
}
}
#media screen and (min-width: 820px) {
div {
background-color: limegreen;
}
}
#media screen and (min-width: 834px) {
div {
background-color: blue;
}
}
#media screen and (min-width: 884px) {
div {
background-color: teal;
}
}
<div></div>
I have a rule in an upper query:
#media (max-width: 3000px) {
.dropdown-w:hover .dropdown-content-w {
display: block;
}
}
that is inherited in this media query:
#media (max-width: 767.98px) {
/*.dropdown-w:hover .dropdown-content-w {
}*/
.dblock {
display: block;
}
}
Since in a lower width media query I use 'click' to display block the element intead of hovering.
But the hover overrides the click behavior. How to cause that rule not to inherit?
As 767.98px is less than 3000px, every screen-size less than 3000px gets applied with those media-queries. Same thing is happening here. As 767.98px is less than 3000px, media-queries are applied. To not apply for screen size less than 767.98px, modify your media query
#media (min-width: 767.98px) and (max-width: 3000px) {
.dropdown-w:hover .dropdown-content-w {
display: block;
}
}
Now, windows with screen sizes less than 767.98px won't inherit the above properties because they are simply not applied to screen sizes below 767.98px..
Bootstrap includes some default media queries that look like this:
#media (min-width: 768px) {
/* Pull out the header and footer */
.masthead {
position: fixed;
top: 0;
}
#media (min-width: 992px) {
.masthead,
.mastfoot,
.cover-container {
width: 700px;
}
Why don't these include the max-width variable? Is that inherently implied by just using min-width, i.e. does CSS just simply "know" to take the highest min-width possible?
It has to do with logic.
TL;DR: See it as if/else statements in you code. You only add the max if you want a max specified.
You can read it like this:
#Div{ color: green; }
#media (min-width: 992px) {
#Div{ background: pink; }
}
This reads:
Make font->green, and also
if( min-screen-width at least 992px ) BG -> pink
If you would have maxwidth it goes with the same logic, only as maximum.
If you have both:
#Div{ color: green; }
#media (min-width: 500px) and (max-width: 992px){
#Div{ background: pink; }
}
This reads:
Make font->green, and also
if( min-screen-width atleast 500px AND a maximum of 992px ) BG -> pink
Easy demo for max-width, make something tablet resolution only (asuming everything 1024+ is desktop):
#media (min-width: 1024px) { /* ... */ }
There is a tendency to design for the smaller screen (ie. mobile) first and use media queries to target larger screens (ie. desktop) users. This is what you are seeing in the Bootstrap CSS.
The main stylesheet applies to the mobile browser (in fact all browsers). Then a media query is used to target slightly larger screens to apply specific rules:
#media (min-width: 992px) {
This targets window sizes greater than (or equal to) 992px (ie. whose minimum width is 992px).
There is no max-width specified here, so this applies to all large windows.
I have a problem with a media query in 320px width.. in my general css for standard web resolutions I have this:
body {
background-image:url(../Images/FondoSL.png);
font-family: 'Open Sans', sans-serif;
font-size:1em;
}
.headerPartOne p{
font-size:0.94em;
color:#676767;
margin-left:30px;
margin-top:5px;
margin-bottom:0;
}
.contentContentPage fieldset ul li span {
font-style:italic;
font-size:0.98em;
margin-left:35px;
}
and in the media query 320px this:
#media only screen and (min-width: 320px) {
body {
font-size:0.7em;
}
.headerPartOne p{
font-size:0.74em;
color:#676767;
}
.contentContentPage fieldset ul li span {
font-style:italic;
font-size:0.48em;
}
}
also i have another media query for web and mobile screen resolutions
#media only screen and (min-width: 600px) and (max-width: 800px)
#media only screen and (min-width: 533px) and (max-width: 853px)
#media only screen and (min-width:1920px)
these media queries work fine.
well my problem is that the query 320px's style is applied to all resolutions, this means that if I run a query to a larger average resolution keeps the styles in 320px media query .. why is this? with other query I do not feel the same, each applies the style I want. (if I not put the 320px media query)
sorry for my english.. thanks
Lets take this one css rule as an example.
Lets remember, that CSS stands for Cascading Style Sheets. So the rules at the bottom of the sheet overwrite any rules that came before it.
So if you have
body {
font-size: 1em;
}
on line 25 of your css style sheet.
and have
#media only screen and (min-width: 320px) {
body {
font-size:0.7em;
}
}
on line 114 of your css style sheet.
The font-size will be 0.7em, since it overwrote the previous style.
Lets say instead of that #media query you did this instead
#media only screen and (max-width: 320px) { /* notice the max-width instead of min-width */
body {
font-size:0.7em;
}
}
The font-size will then appear as 1em on regular screens, (any screen above 320px).
This will apply to styles below 320px
#media (max-width:320px) {
/* styles here */
}
(min-width: 320px) means every resolution greater than 320px in width.
If you want only screens of 320px or less to receive these rules, you need to use (max-width: SIZE) where SIZE is whatever the biggest screen is you want it to be applied to.