So obviously when developing a responsive site, I give elements their widths by using %. So say a two column layout would have

 

.left-column {
             width:80%;
}

.right-column {
             width:20%;
}

 

 

this would then be changed as the screen gets smaller to probably:

.left-column {
            width:100%
}

.right-column {
             width:100%
}

 

 

 

But what about on really large/wide screens? The 80% and 20% wide columns would actually be very wide in terms of px and could potentially have text that would span many lines on a normal screen, spanning just a few line or even one! Also say you've got an image in the right column that is 100% of that 20% width, that would surely be huge on a wider screen?

 

I haven't got a screen wide enough to test this out so am I bit concerned. Would a suitable way around this be to add a max-width to all elements? Or am I worrying about a problem that doesn't exist?

Edited April 16, 201313 yr by jpwd

You can wrap all your elements in a container div and add max-width to it. That way you don't need to specify max width for each element.

 

For example:

<div id="wrapper">
--Site content here--
</div>

#wrapper{
width:90%;
max-width:1300px; //specify width
}

You could use css to set your column widths for spicific device/screen widths.

 

/* All sizes up to 960px */
@media only screen and (max-width: 959px) {

.left-column { width:80%; }
.right-column { width:20%; }

}

/* Tablet Portrait to all sizes */
@media only screen and (min-width: 768px) and (max-width: 959px) {

.left-column { width:80%; }
.right-column { width:20%; }

}

/* All mobiles? */
@media only screen and (max-width: 767px) {

.left-column { width:80%; }
.right-column { width:20%; }

}

/* Mobile landscape */
@media only screen and (min-width: 480px) and (max-width: 767px) {

.left-column { width:100%; }
.right-column { width:100%; }

}

/* Mobile Phones */
@media only screen and (max-width: 479px) {

.left-column { width:100%; }
.right-column { width:100%; }

}

 

 

Maybe something like that.

Second vote for wrapping the content and applying a max-width.

 

You might also want to center your content once the viewport has exceeded your max-width property with margin:0 auto;

 

Bear in mind if you're designing for IE-6 or lower that it doesn't recognize max or min-width properties.

Yeah, a wrapper does appear to be a safe bet and apply the max-width to it. I tend not to use a wrapper but suppose I'll have to.

 

Cheers for the replies.

While wrappers themselves are not strictly semantic they are often a necessity and I wouldn't hesitate at using them. However they are quite often used when not needed creating more non semantic markup than is required - this won't break a site but is undesirable.

Edited April 16, 201313 yr by rbrtsmith