/* 1024 and above desktop ------ */
#media only screen
and (min-width: 1008px){
/* Styles */
.outerBox{
width: 796px;
}
#media only screen
and (min-width: 600px)
and (max-width: 640px){
/* Styles */
.outerBox{
width: 600px;
}
}
The queries above doesn't seem to work properly when applied together..as only the first one works when both applied and if I remove the first one the second one works fine..
Your first rule is missing the closing }:
/* 1024 and above desktop ------ */
#media only screen
and (min-width: 1008px){
/* Styles */
.outerBox{
width: 796px;
}
}
Related
What are the difference between:
#media (max-width: width) { /* CSS Rules */ }
#media screen (max-width: width) { /* CSS Rules */ }
#media screen and (max-width: width) { /* CSS Rules */ }
#media only screen and (max-width: width) { /* CSS Rules */ }
#media only screen (max-width: width) { /* CSS Rules */ }
Also, is it required to add the 'and' keyword?
I made the media queries for tablet , but i can't seem to make them work for mobile.
Tablet
#media(min-width:768px) and (max-width:1024px)
Mobile
#media (min-width:480px) and (max-width:767px)
In the mobile queries when I write some changes they don't work.
You need to make sure you handle all dimensions. The way you have it now you are ignoring any sizes smaller than 480px. Please see below for some basic media sizes.
/* XL */
#media (min-width: 1200px) {
/* style */
}
/* Large */
#media (min-width: 768px) and (max-width: 979px) {
/* style */
}
/* Medium */
#media (max-width: 767px) {
/* style */
}
/* Small */
#media (max-width: 480px) {
/* style */
}
I see some write responsive like this,
#media screen and (min-width:991px) and (max-width:1200px){
/* styles */
}
#media screen and (min-width:767px) and (max-width:990px){
/* styles */
}
#media screen and (min-width:480px) and (max-width:766px){
/* styles */
}
the same thing I write like in this way
#media screen and (max-width:991px){
/* styles */
}
#media screen and (max-width:767px){
/* styles */
}
#media screen and (max-width:480px){
/* styles */
}
like whenever the design breaks I write that size in max-width: rule, and i get a fully responsive design. But which is the correct way doing the method
Take 500px as an example, in the first way, only the second property (border) will apply:
/* 500 is not between 767 and 990, so this rule will ignore */
#media screen and (min-width:767px) and (max-width:990px){
.elem {
background: red;
}
}
/* 500 is between 480 and 766, this rull will apply */
#media screen and (min-width:480px) and (max-width:766px){
.elem {
border: 10px solid green;
}
}
jsFiddle Demo.
But in the second way, both of these rules will apply:
/* 500 is smaller than 991, this rull will apply */
#media screen and (max-width:991px){
.elem {
background: red;
}
}
/* 500 is smaller than 767, this rull will apply */
#media screen and (max-width:767px){
.elem {
border: 10px solid green;
}
}
jsFiddle Demo.
Can anybody tell me why exactly this works
/* small desktop */
#media all and (max-width: 1200px) {
}
/* tablet */
#media all and (max-width: 1024px) {
}
/* mobile phone */
#media all and (max-width: 768px) {
}
but this not:
/* mobile phone */
#media all and (max-width: 768px) {
}
/* tablet */
#media all and (max-width: 1024px) {
}
/* small desktop */
#media all and (max-width: 1200px) {
}
since the last style always overwrite the previous style like :
[class=foo]{
background:red;
background:yellow;
}
output:
.foo background yellow
Simply: stylesheets cascade, so if the condition is true, it will override any previous. Your second example is a mobile-first approach, so you would need to use min-width.
/* mobile phone */
#media all and (min-width: 768px) {
}
/* tablet */
#media all and (min-width: 1024px) {
}
/* small desktop */
#media all and (min-width: 1200px) {
}
I am using some media queries for responsive versions, but with the smallest screen media query it breaks the whole code.
This is the structure of my media query!
/* Landscape phone to portrait tablet */*1
#media (min-width: 480px) and (max-width: 767px) {
/* All Smartphones in portrait and landscape ----------- */*2
#media only screen and (min-width: 321px) and (max-width: 479px) {
/* Styles */
/***** For HTC Mobile *******/*3
#media only screen and (min-width: 0px) and (max-width: 320px) {
With the above structure, the 3rd one media query isn't good at all.
I wrote following code in my style sheet with 3rd one media query.
/***** For HTC Mobile *******/*3
#media only screen and (min-width: 0px) and (max-width: 320px) {
.module-title {
font-size: 25px !important;
line-height: 25px;
}
}
And this code is making title of all versions into font-size 25.
Why is this not specific only for small screens and why it's taking effect on all versions?
And also, should I use "!important" on all versions for all classes?
like:
/* Landscape phone to portrait tablet */*1
#media (min-width: 480px) and (max-width: 767px) {
.module-title: 30px !important;
}
}
/* All Smartphones in portrait and landscape ----------- */*2
#media only screen and (min-width: 321px) and (max-width: 479px) {
/* Styles */
.module-title: 27px !important;
}
}
/***** For HTC Mobile *******/*3
#media only screen and (min-width: 0px) and (max-width: 320px) {
.module-title: 30px !important;
}
}
Any idea?
Remove the !important from the non-responsive class. and make sure you're closing media queries properly.
Example:
#media (max-width: 300px {
/*styles goes here*/
.tag {
} This is tag closing
} this is query closing
This syntax is very wrong:
/* Landscape phone to portrait tablet */*1
#media only screen and (min-width: 321px) and (max-width: 479px) {
/* Styles */
.module-title: 27px !important;
}
}
...because you can't just give a property to a selector!
The *1 after the comment above the code is outside the comment.
So the problem is that and the double braces. The !important below would only break other query if any of the conditions were met in other media-queries (only screen, min-width: 321px or max-width: 479).
#media only screen and (min-width: 321px) and (max-width: 479px) {
.module-title { font-size: 27px !important; }
}
It would not influence the media-query below, for instance:
#media only print and (min-width: 480px) {
.module-title { font-size: 27px; }
}
The syntax above would be the correct one.