Edin theme – increasing post width without pushing sidebar down

• 

  anutennis · Member · Sep 29, 2017 at 5:43 am

  • Copy link
  • Add topic to favorites

  How can I increase the width of posts without pushing the sidebar down?

  I tried the solution here but what it ends up doing is pushing the sidebar down while making the text content larger, so my page ends up being twice as long.

  The Edin theme gives a lot of white space on both sides. Is it possible to increase the width of the posts while still keeping the sidebar in the same position?

  Thank you

  The blog I need help with is: (visible only to logged in users)

• 

  kathrynwp · Staff · Sep 29, 2017 at 4:14 pm

  • Copy link

  If you increase the width of the main column on single posts, you also need to increase the width of the entire content wrapper, so you don’t get the dropped sidebar that you’re seeing. Give something like this a try:

  @media screen and ( min-width: 1230px ) {
    .single-post .content-area {
      width: 640px;
    } 
  
    .single-post .content-wrapper {
      width: 1210px;
    }
  }

  It adds 100px to both the main column and the entire page width, on single posts, on larger screens.

• 

  anutennis · Member · Sep 30, 2017 at 5:34 am

  • Copy link

  Hi Kathryn

  Thanks for your reply.

  I’ve just tried the code you provided on my Edin theme, but nothing seems to have changed. In fact, there is no difference between me using that code or just leaving the CSS customizer blank.

  Am I doing something wrong?

  I simply copied and pasted your code and clicked “Save and Publish”.

  Thanks

• 

  kathrynwp · Staff · Oct 1, 2017 at 4:19 pm

  • Copy link

  I don’t see anything in your CSS editor currently – did you remove it? When you add it, be sure to remove the default code comment. If you accidentally put your CSS code within the comment instead of below it, the code won’t work.

  The CSS I gave you targets single posts only – you would need to visit an individual post like https://anutennis.org/2017/09/23/adfa-cup/ (for example) to see the effect. If you wanted to target both the blog page (what you’ve called “Posts Archive”) as well as single posts, you’d need to modify the code a little:

  @media screen and ( min-width: 1230px ) {
     .blog .content-area,  .single-post .content-area {
      width: 640px;
    } 
  
      .blog .content-wrapper, .single-post .content-wrapper {
      width: 1210px;
    }
  }

  Let me know how it goes.

• 

  kathrynwp · Staff · Oct 1, 2017 at 4:19 pm

  • Copy link

  p.s. your browser window will need to be at least 1230px wide to see the effect. You can check your size here: http://whatsmy.browsersize.com/

• 

  anutennis · Member · Oct 5, 2017 at 4:24 am

  • Copy link

  hey kathrynwp, thanks so much for clarifying.

  I’ve tried that and it does work.

  Is there a way to make this apply to pages as a whole? e.g. not blog posts, because most of our information is on individual pages

  Regards

• 

  kathrynwp · Staff · Oct 5, 2017 at 1:20 pm

  • Copy link

  Sure – you can add pages to the mix by replacing the earlier CSS with this:

  @media screen and ( min-width: 1230px ) {
     .blog .content-area,  .single-post .content-area, .page .content-area {
      width: 640px;
    } 
  
      .blog .content-wrapper, .single-post .content-wrapper, .page .content-wrapper {
      width: 1210px;
    }
  }