Independent Publisher 2 – change column widths

• 

  fabiusmaximus2000 · Member · Apr 25, 2017 at 4:20 pm

  • Copy link
  • Add topic to favorites

  The main column width is 740. The Widget Area width is 220.

  This leaves a large white space between them. Why so large?

  How can I change the widths of the main and widget columns?

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

• 

  otpidusprime · Member · Apr 25, 2017 at 4:54 pm

  • Copy link

  Hello @fabiusmaximus2000,
  Use this CSS codes to reduce the gap between the sidebar and the main content area:

  /*increase main content area width*/
  #main {
      max-width: 900px;
  }
  
  /*increase sidebar width*/
  .has-sidebar .site-content .widget-area {
      width: 25%;
  }

  Again, obviously you can change the values to your liking.

  Hope this helps 🙂

• 

  fabiusmaximus2000 · Member · Apr 25, 2017 at 5:17 pm

  • Copy link

  Thanks!

  Is there a way to specify the sidebar width in px, as with the main column?

• 

  otpidusprime · Member · Apr 25, 2017 at 5:19 pm

  • Copy link

  Yes there is, try this code:

  .has-sidebar .site-content .widget-area {
      width: 335px;
  }

  But make sure you do not go beyond 339px because, then the sidebar moves out of the viewport window.

• 

  fabiusmaximus2000 · Member · Apr 25, 2017 at 5:39 pm

  • Copy link

  Thanks, that’s great!

  Did this narrow the space between the two columns (main and widget), or did it make the overall page wider? I can’t tell.

• 

  otpidusprime · Member · Apr 25, 2017 at 5:42 pm

  • Copy link

  They did manage to reduce the gap(space) between the two columns(main and widget), also they made the main content column a little bit wider.

• 

  fabiusmaximus2000 · Member · Apr 25, 2017 at 5:53 pm

  • Copy link

  Thanks! That has been very helpful.

  Is there any reason not to increase the size to 900 and 339 (main and widget), and so reduce the white margin width? Is the white space divider purely cosmetic — or does enlarging the columns have ill affects (e.g., looking bad on smaller desktop screens)?

• 

  otpidusprime · Member · Apr 25, 2017 at 6:51 pm

  • Copy link

  Is there any reason not to increase the size to 900 and 339 (main and widget), and so reduce the white margin width?

  The ultimate reason is to prevent overlapping of both columns and having a really messed up looking layout, there might be other reasons too like it may ruin the layout on smaller display devices etc.

  So, no they are not cosmetic. Exceeding the limits will have it’s ill-effects.