I'm trying to modify just a few classes in my CSS for different screen resolutions, I'm aiming to have:
- The default applied CSS for 1200+ width,
- A media query embedded in the css for resolutions between 601 and 1199 px, //This is what's not working
- A media query embedded in the css for resolutions 600px and below
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;
}
}