Restrict text width on wide screens

Support Area Forums Elite Restrict text width on wide screens

This topic contains 3 replies, has 2 voices, and was last updated by  Bill Robbins 1 year, 6 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
URL to the page in question: http://digitalprint.paulcato.com/home/
  • Author
    Posts
  • #36381

    Paul Cato
    Participant

    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

    #36398

    Bill Robbins
    Moderator

    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

    #36418

    Paul Cato
    Participant

    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

    #36427

    Bill Robbins
    Moderator

    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

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Restrict text width on wide screens’ is closed to new replies.