change width post and sidebar

Activello
1

Hi guys,
I was wondering, if it is possible to change the width of the posts? And also of the preview on the homepage.
Basically, I am looking to widen the post parts and having the sidebar (in my case the sidebar is on the right) pushed over even further and making it more narrow.
I have included a screenshot, so you can see.

My website is http://www.primetimechaos.com/

Thank you!
Theresa

2

Hey there

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.
You can adjust the percentages to your liking.

Admin Area -> Appearance -> Customize -> Additional CSS

/*change width of side bar */
@media (min-width: 992px){
/*side bar*/*
div#secondary {
    width: 23% !important;
}
 /*main content*/
  .main-content-inner.col-sm-12.col-md-8 {
    width: 76% !important;
}
}

Best Regards,
Support

3

Thanks for the quick response!
That code does work BUT the content now only extends to the right, when I change the % in the code. Is there any way to move the main content over to the left a bit?

Also, when I change the width of the sidebar and the main content - there are big gaps appearing between the widgets in the side bar. I attached a screenshot so you can see. What could be the cause of that?

Thank you for the help!
Theresa

4
That code does work BUT the content now only extends to the right, when I change the % in the code. Is there any way to move the main content over to the left a bit?

To move it to left, you have to increase width of its container using below CSS code.

.container.main-content-area {
    max-width: 1170px;
}
Also, when I change the width of the sidebar and the main content – there are big gaps appearing between the widgets in the side bar. I attached a screenshot so you can see. What could be the cause of that?

To remove that gap, please also use the below custom CSS code.

iframe.snapwidget-widget {
    height: auto !important;
}

#secondary .widget {
    margin-bottom: 20px;
}
5

You are so quick, incredible, thank you!
One more little question:
Is there any way I can also move the side bar a little more to the right? So that there is more of a gap between the main and the side content?

I attached another screenshot so you can see.
Thank you so so much for your patience!

6

You can do that using below CSS code and then adjust width value in the above shared CSS code.


#page #secondary {
    float: right;
}
7

Thank you, that seemed to work!
And even further to the right, is not possible?

8

You are most welcome here :slight_smile:

And even further to the right, is not possible?

As said above to achieve this you have to adjust the width in the above shared CSS code but i don’t recommend it as your site looks beautiful now.

9

Oh thanks! Well in this case I am all good!
I really appreciate the help!

10

You are always welcome here :slight_smile: