#
October 10, 2012 at 9:45 am
A 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. ;)
