WordPress.org

Ready to get started?Download WordPress

Forums

Changing the width of pages (8 posts)

  1. jphogan
    Member
    Posted 2 years ago #

    I would like to change the width of my text area on my pages. If you'll look at one of my pages here as an example: http://iamsinc.com/blog/sales-coaching/ The text area leaves a wide, white margin before the background starts. I have scoured the forums and tried a number of different things with no success. I have been able to stretch the white area, but not the text space within the white area. I would like the change to only apply to pages and not posts. Is that possible?

    I am using the twenty eleven theme with a child theme for any changes. Thank you for any help!

  2. becskr
    Member
    Posted 2 years ago #

    In your child theme style.css, add
    .singular #content, .left-sidebar.singular #content {
    margin: 0 3.6%;}

    Play with that percentage (leave the 0 before it, that refers to your top and bottom margins, just edit the second value) until your happy, it's a responsive design (scales for different screen resolutions, so you'll need to check on a few different devices to see that you're happy.

  3. jphogan
    Member
    Posted 2 years ago #

    Thank you so much for your response. I have added that code to my child theme and played around with the margin (even reducing it to 0), but the only thing it seems to change is the width of my Disqus comment area. When I lower the margin percentage, the Disqus area stretches out further and further, but the text area of the page stays the same.

    How do I widen the margins of the text area so there is less white space between the text and the background?

    Thank you again!

  4. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    this might be missing:

    .singular .entry-content { width:100%; }

  5. jphogan
    Member
    Posted 2 years ago #

    That's exactly it! Thank you both for your help.

  6. jphogan
    Member
    Posted 2 years ago #

    This may be asking too much, but when I am editing the page, the visual preview still shows the preview at the old margins which makes the published page look different than the preview.

    Is there a way to change that so the preview on the back end is showing the text, pictures, etc. at the same margin as the published page?

    I really appreciate all the help.

  7. alchymyth
    The Sweeper & Moderator
    Posted 2 years ago #

    I think it is in editor-style.css:

    html .mceContentBody {
    	max-width: 584px;
    }

    I never had to do this in a child theme (?).

  8. jphogan
    Member
    Posted 2 years ago #

    Thank you. This was very helpful. I created a editor-style.css sheet for my child theme and added the code you gave me. By changing the max-width, I am able to match what I'm seeing on the published page. Unfortunately, it does this for the visual editor for both pages and posts, but it's still a lot better. I really appreciate it.

Topic Closed

This topic has been closed to new replies.

About this Topic