CSS Media Queries
-
-
# October 10, 2012 at 9:34 am
Hi,
Im pretty new to web design. I wonder if anyone can help. I am trying to use media queries to deal with large screen sizes, but when I test the page in cross brower testing the changes have not taken affect. I’m not doing anything complicated, I’ve tried it on an external stylesheet, but reverted to internal, my code is
(the main css)
body{
width:1200px;
height:2300px;
margin:auto;}(the changes to the body that I’d like to occur)
@media screen and (max-width:1600px) and( min-width:1400px){
body{
min-width:1400px;
max-width:1600px;}
}
This is what I want to happen if the browser is larger than what I worked on 1366×768. The other queries are structured in the same way, and I have included the media queries with the main CSS. Is this the right way to do this?Thanking you in advance.
# October 10, 2012 at 9:45 amA few things here:
First, in most case you shouldn’t specify such styles directly to the body tag. You should create a wrapper which holds all columns depending on your layout, etc. Maybe something like this:
<html>
<head/>
<body>
<div class='wrapper'>
<div class='main-content'/>
<div class='aside-content'/>
</div>
</body>
</html>
Secondly, you shouldn’t specify a height, neither to your body nor to your wrapper. Let the container expands itself according to the content it wraps.
Then, you shouldn’t build a website this large. The average screen resolution is 1024*768, so your wrapper width should be about 980px max to default. Then, on larger screens, you expand it with media queries.
Last, your media query declaration seems good (except I would put the min-width before the max-width, looks cleaner to me) but not the properties/values you set to your wrapper (body in your case).
You’d like to try something like this:
@media screen and (min-width: 1400px) and (max-width: 1600px) {
body {
width: 1400px;
}
}
Plus, unless you’re planning to add another media query starting from min-width: 1600px, you should set a max width to this one. ;)
# October 10, 2012 at 10:39 amThanks, I’ll give some of it a try, and see whether there are any changes.
Lola
You must be logged in to reply to this topic.