Changing the width of pages

  • 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: https://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!

Viewing 7 replies - 1 through 7 (of 7 total)

  • 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.

    Thread Starter jphogan

    (@jphogan)

    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!

    this might be missing:

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

    Thread Starter jphogan

    (@jphogan)

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

    Thread Starter jphogan

    (@jphogan)

    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.

    I think it is in editor-style.css:

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

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

    Thread Starter jphogan

    (@jphogan)

    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.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Changing the width of pages’ is closed to new replies.