Reduce Sidebar Right Margin / Padding

Hello Kharis,

All Pages With Sidebars - I’ve tried reducing the white space to the right of sidebars to no avail. Text wraps onto next line whilst there is ample room for it to be displayed on the same line.

An example with the sidebar issue is given on this product post page.

Thank you.

Text wraps onto next line...

Which text did you mean? Could you please point me to what this text is saying?

Regards,
Kharis

Hello Kharis,

Here is a link to an article page for clarification.

You’ll notice that the title text, “Health And Fitness Quotes” under the Recent Posts Widget section is broken onto two lines while there is still room for it to fit onto one line.

The next item with the title text, “Processed Foods : The Main ‘Culprits’ Nailed!” is also squashed onto four lines…and so on.

The wide right margin/padding is even more pronounced with browsers like Firefox. All pages with sidebars need some adjustments while still maintaining an equal or decent left margin/padding, i.e., where the sticky social share buttons (Facebook, …LinkedIn, Pinterest etc.) are located.

I know it’s a bit fiddly given that pages still have to render well on all devices and across browsers with any changes made, but your input would be very much appreciated.

Thank you.

Hello there,

Basically there is no space there because the limitation of sidebar’s width. And also the maximum width of the container which won’t touch the edge of the screen. Things you need to do are:

  • Enlarge the container
  • Adjust the sidebar width

Those might produce another design issue.

Regards,
Kharis

Hello Kharis,

Could you please provide me with some code snippets to achieve the above, I would like to give it a shot.

Thank you.

Hello there,

Try this code:


@media only screen and (min-width:992px) {
  
  .container{
    width: 100% !important;
  }
  
  #secondary.col-md-3 {
    width: 400px; 
  }  
  
  #primary.col-md-9 {
    width: calc(100% - 400px);
    width: -moz-calc(100% - 400px);
    width: -webkit-calc(100% - 400px);
  }  
  
}  


Regards,
Kharis

Hello Kharis,

That’s awesome, the code worked… pages rendered well with no issues. Simply put, you’re a genius!

Thank you.