I'm trying to modify just a few classes in my CSS for different screen resolutions, I'm aiming to have:
When i use a single width condition, for example @media screen and (max-width: 600px) {
, the css is applied as it should be.
However when I try @media screen and (max-width: 1199 px) and (min-width: 601){
the style never gets applied..
I've tried swapping the order of these conditions and also just having @media screen and (max-width: 1199 px)
on the basis that the 600px rule will override it afterward but for some reason it just doesn't seem to work. Just to be clear, i've either got the default styling or the 'max-width: 600px' style when i shrink the screen to less than 600px, i can't seem to get a style applying for the middleground.
Any obvious mistakes in my CSS?/suggestions? Would be appreciated!
I bunged my html and css into a jsfiddle for anyone who wants to see for themselves http://jsfiddle.net/X6cZ7/3/ (Observe the navigation bar li items as you drag the view for the website, they change style at <600px but should also look red (for testing) at <1199 yet they dont) Only testing on Chrome at the mo, in case that's relevant.
CSS (Relevant @media stuff at the bottom..):
* {margin: 0; padding:0;}
body
{
font: normal 100% 'Poiret One', 'Trebuchet MS', sans-serif;
color: Grey;
background-image: url('Images/background_gradient.png');
background-repeat:repeat-x;
background-color: #d4ffaa;
margin: 0 auto;
height: auto;
max-width: 90%;
}
h2
{
margin: 0.6em 0;
color: Grey;
border-bottom: 2px solid #d4ffaa;
font: normal 2em 'Poiret One', 'Trebuchet MS', sans-serif;
}
#central_container
{
width: 100%;
margin: 0 auto;
height: 100%;
float: left;
}
#leftside_container
{
float: left;
width: 67.1%;
clear: left;
}
#header_container
{
width: 100%;
max-height: 300px;
height: 15em;
}
#header_title
{
width: 100%;
height: 80%;
}
#header_title h1{ font-size: 4em; color: Ivory;}
#navbar_container
{
width: 100%;
height: 20%;
}
.navbar_links ul{ list-style-type: none; }
.navbar_links li
{
display: inline;
size: 4em;
}
.navbar_links a:link, a:visited
{
font-size: 1.5em;
text-align: center;
text-decoration:none;
padding: 0.1em 0.4em;
color: Ivory;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-bottom: 10px solid Ivory;
}
.navbar_links a:hover, a:active
{
color: Grey;
border-bottom: 10px solid #d4ffaa;
}
#currentpage_container
{
background-color: Ivory;
width: 100%;
height: 20%;
}
#currentpage_content
{
font-family: 'Trebuchet Ms';
padding: 1em 3em;
}
#currentpage_content p { padding: 0.8em;}
#rightside_container
{
float: right;
width: 33%;
}
#register_container
{
width: 100%;
max-height: 300px;
height: 15em;
}
.bubble{
background-color: Ivory;
border-radius: 15px;
-moz-border-radius: 15px;
display: inline-block;
position: relative;
height: 80%;
width: 100%;
margin: 1em 0;
}
.bubble p
{
padding: 1em;
white-space: preline;
font-weight: bold;
}
.bubble::after { /*arrow*/
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-right: 30px solid Ivory;
content: '';
position: absolute;
left: -30px;
top: 50%;
}
#contact_container
{
background-color: Ivory;
width: 100%;
}
#contacts_content{ padding: 1em 3em; }
#contacts_content .text
{
font: normal 0.9em 'Trebuchet Ms';
padding: 0.8em 0;
}
.contactNum, .contactEmail { font-size:1.5em; }
.contactNum::before { content:url(Images/phone_icon.gif);}
.contactEmail::before { content:url(Images/email_icon.gif);}
#logos_content
{
padding: 0.5em 3em;
height: 150px;
}
.logo
{
display: none;
max-width: 40%;
position:relative;
max-height: 40%;
}
.logo2
{
display: none;
max-width: 40%;
position:relative;
max-height: 40%;
right: -50%;
}
#social_content
{
padding: 1em 3em;
}
/* SMALLER RESOLUTION CHANGES */
@media screen and (max-width: 1199 px) and (min-width: 601){
.navbar_links ul{ list-style-type: none; }
.navbar_links li
{
display: inline;
background: Ivory;
}
.navbar_links a:link, a:visited
{
font-size: 1.5em;
padding: 0.1em 0.4em;
color: red;
border-left:3px solid transparent;
border-right:3px solid transparent;
border-bottom: 3px solid #d4ffaa;
}
.navbar_links a:hover, a:active
{
color: Grey;
border-bottom: 3px solid Grey;
}
}
@media screen and (max-width: 600px) {
#central_container,
#leftside_container,
#rightside_container,
#header_container,
#header_title,
#navbar_container,
#currentpage_container
{
float: none;
width: auto;
height: auto;
}
#header_title h1{ font-size: 3em; color: Ivory;}
.navbar_links ul{ list-style-type: none; margin-bottom:1em;}
.navbar_links li
{
display: inline;
}
.navbar_links a:link, a:visited
{
padding: 0;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
border-bottom: 2px solid Ivory;
}
.navbar_links a:hover, a:active
{
border-bottom: 2px solid #d4ffaa;
}
}
Media process errors on Android can be triggered by a long list of factors. For example, maybe you're running low on RAM and storage space. Clear the cache, check for updates, remove the SD card and check if the error is gone. As a last resort, reset your device to factory settings.
You may use as many media queries as you would like in a CSS file. Note that you may use the and operator to require multiple queries to be true, but you have to use the comma (,) as the or operator to separate groups of multiple queries. The not keyword can be used to alter the logic as well.
The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.
@media is the actually media query. The word screen is adding the 'conditions' to the media query. So @media screen is telling the media query to apply (whatever other conditions) to screens. For example, @media screen and (max-width: 360px) will target only screens with a max-width of 360px.
In your css there is some typing mistake, hence its not working, please check below
@media screen and (max-width: 1199 px) and (min-width: 601){
}
@media screen and (min-width: 601px) and (max-width: 1199px){
}
EDIT:
There shouldn't be any spaces between the value and unit, i.e. 1199 px
is wrong it should be 1199px
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With