I am trying to learn responsive design and I have managed to write the first couple media queries to scale the some of the divs, but I cant seem to get the media queries for the ul list in the services div that has the sprite icons to take affect. It just gets overided by the first full screen style. Am I missing something?
http://www.satori-design.com/
Hi,
I only had a quick look (as you have a lot of css files in there) but check that your meria query styles are in the right order.
It’s no good defining the rules for a specific width and then have rules that floow that apply to all widths.
e.g.
@media (max-width: 994px) {
#service ul { left: 20px !important; }
#service li {
display: inline;
width: 100%;
height: 100%;
float: left;
}
#service ul.services {
list-style-type:none;
position:absolute;
top: 350px;
width:960px;
}
/* etc....*/
}/* end of media query*/
/*Services*/
#service { height:300px; }
#service ul {
top:8%;
left: 10px;
position: absolute;
max-width:1000px;
width:100%;
}
@media (max-width: 994px) {
#service ul { left: 20px !important; }
#service li {
display: inline;
width: 100%;
height: 100%;
float: left;
}
#service ul.services {
list-style-type:none;
position:absolute;
top: 350px;
width:960px;
}
/* etc....*/
}/* end of media query*/
/*Services*/
#service { height:300px; }
#service ul {
top:8%;
left: 10px;
position: absolute;
max-width:1000px;
width:100%;
}
/* etc...*/
#service li{
height:202px;
width: 200px;
float:left; /* IMPORTANT */
list-style-type: none;
display:inline; /* IMPORTANT */
}
The rules that follow the media query will take precedence (assuming they have more weight of course).
So are you saying I should have all the media queries after the initial styles?
I was able to get it a lot nicer than it was when I first posted. I have only targeted the next size down though so far and I had to adjust my sprites a bit.
They need to be in the order that you want the rules inside to be applied.
If you look at the snippet I posted which was from your page and look at the styles for #services li.
e.g.
@media (max-width: 994px) {
#service li {
display: inline;
width: 100%;
height: 100%;
float: left;
}
}
/* end of media query*/
#service li{
height:202px;
width: 200px;
float:left; /* IMPORTANT */
list-style-type: none;
display:inline; /* IMPORTANT */
}
You are saying “width 100%” in the max-width: 994px media rule and then you are following it with width:200px for all widths. Therefore the width will be 200px. That’s fine if that is what you wanted to happen but not if you wanted it to be width:100%.
Media queries allow you to target various widths/heights etc but they still follow the normal cascade and if you add rules after the media queries then they will modify what went before. usually you would put the media queries at the end of the stylesheet or at least after the original rules for that element and then you can be sure the media query will be effective. It would be the same problem if you defined the max-width media queries themselves in the wrong order as they should go from largest to smallest.
@Paul O’B
Thanks! That helped a lot. I was making pretty good headway in Chrome, but then I switched to check FF and its not so hot.
I was using stuff like this
zoom: .76;
-moz-transform:scale(0.76);
-moz-transform-origin: 0 0;
Is this not proper styles?
You need to use al the vendor prefixes and the correct rule as well.
e.g.
.test {
-webkit-transform: scale(0.76);
-moz-transform: scale(0.76);
-o-transform: scale(0.76);
-ms-transform: scale(0.76);
transform: scale(0.76);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
I would put the zoom in a conditional stylesheet for ie8 and under because it may conflict with the other rules.
I think I am going to try that after I practice a bit. For now, I took a different approach of making the fancy shadow images only apply to desktop and turned the div’s into css styling only. So far its going good, but I am on the last scale down query but the services div wont kick in even though I placed it at the end. One rule is applying but the height wont! Any ideas?
I’m not sure what I’m looking for here.? Can you clarify which element you are having trouble with and where to find it?
Sorry, the element I was trying to target was the div under the slider and the circle list items (#services). I looked at some other sites while I was working on it and I saw that some just swap the images out when the browser resizes so Thats what I did. Unfortunately it half defeats the point of using a sprite if you make another one…lol. Now that it looks ok, I might go back and try to use those scale prefixes and see if I can make the 3d shadows that display on the top and bottom of the desktop page divs show. Or do you think its better to leave them off for the mobile phone size?
If you can create them with css box-shadow then that’s fine but if you need to use images then don’t bother for mobile.