Move Content and Side Bar

Activello
1

Hi there,
I was wondering if it is possible to move the main content over to the left and the side bar to the right?
I already tried the code below but that just seems to push the sidebar over, rather than making the main content move to the left.
Is it possible to “move” both containers over and change the width of them at the same time?

I included a screenshot including drawings, so you can see what I mean.

/*CHANGE WIDTH OF CONTENT*/
@media (min-width: 992px){
/*side bar*/
div#secondary {
    width: 25% !important;
}
/*main content*/
  .main-content-inner.col-sm-12.col-md-8 {
    width: 75% !important;
}
}
.container.main-content-area {
    max-width: 1200px;
}
#page #secondary {
    float: right;
}

I also included an example of what I mean.

Thank you in advance!
Theresa

2

Hi,

For bigger screens it looks like that, you can increase the width of the container for bigger screens,

@media only screen 
  and (max-width: 1400px) {
.container {
    max-width: 1400px;
    width: 1400px;
}
}

You can play with the media query’s min and max width, and also adjust the CSS properties max-width and width according to your needs, you can check this article Media Queries for Standard Devices | CSS-Tricks for the media queries.

Let us know,

Thanks,
laranz.

3

Hi there,
thanks for the answer!
Unfortunately that did nothing except make everthing bigger.
Is it possible to make the content itself wider?

As of now, I have only found codes that move the boxes but never codes that make the content AND the box wider?
Is there any code that can do that?

Theresa

4

Hi,

Instead 1400px you can use 100% so that it took the whole space of the browser window width. Adjust the media query max-width on which screen you want this.

Let us know,

Thanks,
laranz.

5

Hi there!

I tried that but it also doesn’t do anything.
I would love to just make the container wider - meaning I want the content to be broader (more words in one line, not just bigger).
That has to be possible somehow.
Right now there is a lot of white space right and left (see attachement) and I want to change that.

Thanks for your help!

6

I want it to look a bit like this:
https://whoismocca.com/lifestyle/travelling-the-world/amsterdam-vintage-shopping-guide-meine-7-liebsten-designer-second-hand-laeden/

On the homepage and the posts (see attachement).

So basically making the conent wider while pushing the sidebar over a bit.
When I try that with code, it always pushes the sidebar down. (Side bare is then underneath the content.)
I just need the white space on the right and left to be more narrow.

Thank you so much :slight_smile:

7

Could you please share me your site URL where it’s displaying so that i can help you to achieve it?

8

Hi Movin!
My link is http://www.primetimechaos.com/ :slight_smile:
Thank you for your help!

9

Please try using below custom CSS code to achieve it.

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

Thank you Movin, you are a legend :slight_smile:

11

You are always welcome here :slight_smile: