Restrict text width on wide screens

[Paul Cato]

Hi Bill,
When viewing text on a wide monitor the words are spread out a long way across, even with some sort of percentage limit.

I’m sure there an easy way to restrict the maximum width of text content to an absolute value – maybe 800px – so that it only affects the stretched screens and huge monitors. Would you please tell me the appropriate CSS?

I’m thinking that images and Hero slides etc would all be great to remain at full width, but it’s just the text I’d like to contain as something like a normal paper page.

I can ‘sort of’ do it with a visual editor and making a central column to put each lot of text in, but on the Home page (Hero) it is made up of widgets that will pull content from several pages, and I have several more to add, and maintain, so it’s not the perfect answer.

Possibly there is already that functionality but it might be set a little wider than I want.

So glad to have found you! I have already searched and pored over the forum for the answer but haven’t found it, sorry.
Have a great Sunday!
Paul

[Bill Robbins]

Hi Paul,

Excellent question there. The content areas of the theme (widgets on the home page, plus post and page content elsewhere) have a maximum width of 1140 pixels. That steps down as the screen size shrinks.

The hero area doesn’t have that limit though. It is set to be 80% of the width of the screen. You could limit that on larger screens if you’d like to. Add this to the Custom CSS box that’s in the advanced tab of your theme options page:

@media only screen and (min-width: 1600px) {

	.hero-copy  {
		width: 60%;
		left: 20%;
	}

}

That would reduce the width on larger browser windows. Feel free to adjust those percentages if you like to. Let me know if you have any questions or trouble.

Have a great week,
Bill

[Paul Cato]

Yes, Bill, that does it for the Hero section, but what about changing that 1140 pixel width everywhere else?

I’d like to see a maximum width of text in a single column about 900 to 950 pixels, more or less.

I can then adjust the Hero percentage to suit, if necessary.

Thanks,
Paul

[Bill Robbins]

You can make that narrower as well with this CSS:

@media only screen and (min-width: 1024px) { 

	.wrap {
		width: 900px;
	}

}

Feel free to adjust the 900px to whatever number you need there.

Take care,
Bill

[Author]

Posts