How to widen page content area when using a sidebar

  • Resolved and70

    (@and70)


    7 years, 4 months ago

    Hi

    I’m making the final touches to my new website and I am using the Edin theme.

    For some of my pages I have used a side bar but have noticed that this takes up a lot of space and leaves a modest area for the page content.

    How do I alter the padding in this area so I can make the page content area wider or move the sidebar more to the left.

    I would be grafeful for any css to help me achieve this.

    Many thanks in advance

    • This topic was modified 7 years, 4 months ago by and70.
Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi there,

    You could use the following custom CSS to tweak the width of both the content area and the sidebar:

    @media screen and (min-width: 1230px) {
    .content-area {
        width: 540px;
    }
    
    .widget-area {
        width: 300px;
    }
}

    In case you’re not aware: Please do not edit your theme’s files directly. Any changes you make there will be lost when it comes time to update. You can instead add CSS by navigating to Appearance > Customize > Additional CSS.

    Increase/decrease the value of width for both the .content-area and the .widget-area in the above CSS to increase/decrease the amount of space either takes up. The sum of both values should always be 840px to make sure that the sidebar isn’t pushed below the content area.

    Let me know if the above helps! If not, could you perhaps share a link to your site so that I can be more specific with the CSS that I provide?

    Thanks!

    Thread Starter and70

    (@and70)

    Hi Siobhan

    I am using a child theme so no problem. The CSS you outlined worked like a charm – many thanks again.

    Thank you ??

    I’m glad to hear that! ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to widen page content area when using a sidebar’ is closed to new replies.