[Resolved] Sidebar width

[Dominik Günder]

Hey there,

i guess one last question remains for me tonight 🙂

Is there any way to change the width of the left and right sidebars out of your backend?

Right now it looks like it maybe just can be altered thru editing the CSS. It would be way better if there was a option to change this by percent to add more space for the center main container when i do not need so much space for the sidebars.

Already glad to hear from you.

[Tom]

Hi Dominik,

Actually had a WordPress.org thread about this topic this morning.

Right now the layout uses percentages – 25% for the sidebar and 75% for the content.

I’m working on an addon that will allow you to alter these percentages that I hope to have out very soon.

You could do this with custom code, but there would be a lot involved as there’s no many options (left sidebar, right sidebar, both, none etc..).

Let me know if you have any questions,
Tom

[Tom]

The newest version of the spacing addon allows you to change the width percentage of the sidebars now 🙂

Tom

[john]

Hi Tom

not sure if i should keep similar questions in already existing questions, but would it be possible to edit the widths in a custom way (right now i can only choose 15,20,25 etc…) but I may need about 18% set?

and as well not have padding on the eight side of the navigation (with a left set menu i want to make the width of the nav skinnier)

thanks!

[Tom]

Hi John,

As the site uses a grid, you would have to edit the CSS of the sidebar and the content area.

For example, if your sidebar is set to “25”.

.widget-area.grid-25 {
      width: 18%;
}
.content-area.grid-75 {
      width: 68%;
}

As for the sidebar padding, do you mean the separating space between the sidebar and content? If so, what about reducing the separating space in the Spacing add-on?

Let me know 🙂

[john]

Hi Tom

thanks that works! sorry my second idea was unclear basically i didnt want the navigation to be as wide as specified by the sidebar widget, but it looks better now that i’ve reduced the % so i think its all good now

your support is beyond amazing!

[Tom]

Happy to help! 🙂

[Torsten]

Hi Tom,
I’m struggling here…
On the site http://goo.gl/jLURCj I would like to keep the primary menu on the far right and the category widget next to it (which is located in the left sidebar) and eventually the content area wider.
Can you help?
best
Torsten

[Tom]

From what I can see that’s exactly what you have? The menu on the far right with the categories to the left of it.

[Torsten]

Hi Tom,
in fact what I would like to achieve is what I’m showing in this screenshot: http://goo.gl/aKXnyn
The menu on the far right and the widget area much closer to it with the content area almost attached to the widget area.
best
Torsten

[Tom]

Ah, so you need to decrease the width of the sidebars even more..

Try this CSS:

@media (min-width: 1025px) {
    .content-area.grid-70 {
        width: 80%;
    }
    .sidebar.grid-15 {
        width: 10%;
    }
}

@media (max-width: 1024px) and (min-width: 768px) {
    .content-area.tablet-grid-70 {
        width: 80%;
    }
    .sidebar.grid-15 {
        width: 10%;
    }
}

[masterez]

Hello,

I have a similar problem.

I would like to place an Amazon Search widget in my right sidebar, but it doesn’t fit because it seems that the sidebar has only a width of 200 px. The widget needs a minimum width of 250 px.

How can I fix this?

Thank you in advance.

Kind regards,
masterez

[Tom]

Hi there,

Do you have our Spacing add-on? It allows you to adjust the width of the sidebar in the Customizer by going to “Customize > Element Spacing”.

Let me know 🙂

[Author]

Posts