Sidebar Width Formatting

Activello
1

I would love to change the sidebars width.

I have looked up other threads and used code that you have provided but it didn’t seem to work for me.

The code I used was

@media (min-width: 992px) {
.main-content-inner.col-sm-12.col-md-8 {
width: 70%;
}
div#secondary{
width: 30%;
}
}

I would love to make the sidebar utilize the space on the right and sort of “scoot” over to allow the main content in the middle to be bigger.

For example, I would love the content in the middle, the picture, the body text, everything. To take up more space on the page, and I would love the sidebar including the “join our newsletter” widget as an example to be either

  1. Smaller

or

  1. Moved over to the right and utilize the white space over there.

Let me know if you need me to elaborate on anything else.

Thank you.

URL is www.thevipentrepreneur.com

2

Hi @lcawley9,

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

The shared code should work fine on your site. I visited your shared site but didn’t find that custom CSS code anywhere in the website markup.

Where have you added it?

To utilize the white space around the pages please try using the below CSS code.


@media (min-width: 1200px){
.main-content-area.container {
    width: 1260px;
    max-width: 100%;
}
}

Best Regards,
Movin

3

@movin

Worked like a charm.

One more question, now how can I make the “sidebar’s” width reduced, and the main content take up the space that the sidebar being reduced has vacated if that makes sense.

In simple terms, I would just love for the sidebar to be moved a tiny to the right, and then have the main content pushed over.

Currently this is what it is.
Main Content: Sidebar:

And this is what I would want it be, so you can visually see.
Main Content: Sidebar:

Thank you for the help!

4

Well, the illustration looked better in the text box lol, hope you get what I’m saying.

5
One more question, now how can I make the “sidebar’s” width reduced, and the main content take up the space that the sidebar being reduced has vacated if that makes sense.

You can try achieving this by changing the width of both in the CSS code as displayed below.

@media (min-width: 992px) {
.main-content-inner.col-sm-12.col-md-8 {
width: 75%;
}
div#secondary{
width: 25%;
}
}