Reduce size of sidebar in dara theme

dgreenruf · Member · Feb 17, 2018 at 2:38 am
Copy link

Add topic to favorites
How can I reduce the size of the sidebar? I am using the Dara theme. The sidebar on the right has a search window, but it is unnecessarily large. I’d like to cut it in half.

The blog I need help with is: (visible only to logged in users)
shubhamgmath · Member · Feb 17, 2018 at 3:35 am
Copy link
hi dgreenruf

How can I reduce the size of the sidebar?

For this you need to add custom css to change the size of sidebar , custom css can only be changed in premium or business plan if you are under these plan than you just need to add this code
```
@media screen and (min-width: 1000px)
{
#secondary.widget-area {
    width: 20%;
    max-width: 250px;
}}
```
The width for sidebar was 26% before i have changed this to 20 you can adjust it according to your need.

So if you want to keep left hand side same as before than its fine but if you want to add that free space to left side than you need to change the below code to the new code
code to be changed:
```
@media screen and (min-width: 1000px)
{
.content-area {
    float: left;
    width: 77.11%;
    max-width: 825px;
    margin-left: -55px;
}}
```
New code
```
@media screen and (min-width: 1000px)
{
.content-area {
    float: left;
    width: 84.11%;
    max-width: 1000px;
    margin-left: -55px;
}}
```
To know more about the upgrade plans prices and feature, here’s is the guide for that :
https://en.support.wordpress.com/plan-features/

Hope this helps you, feel free to ask questions if you have.
rufneoffice · Member · Feb 17, 2018 at 4:00 am
Copy link
Thanks for your advice, but it didn’t do anything. Any other ideas?
shubhamgmath · Member · Feb 17, 2018 at 4:07 am
Copy link
Hi rufneoffice

I have checked the(dgreenruf.wordpress.com) the code has worked for @dgreenruf.

If you want it for your blog it might be little different, so can you please give the proper address for your blog and please either mention full details regarding your blog or create a new thread for that here:

https://en.forums.wordpress.com/?new=1
thesacredpath · Member · Feb 17, 2018 at 5:21 am
Copy link
@rufneoffice, reduce the width on #secondar.widget-area to 13% and increase the width on .content-area to 87%. That reduces the size of the sidebar from 26% to half that, 13%, and increases the width of the content area.
rufneoffice · Member · Feb 17, 2018 at 11:59 am
Copy link
Interesting. I played around with the numbers. On my screen I am seeing no change in the width of the sidebar. I tried Chrome, Firefox, and Edge browsers.
rufneoffice · Member · Feb 17, 2018 at 10:54 pm
Copy link
I just discovered that if I make the browser window wider, this code will make the sidebar narrower – but not when the browser window is narrower. I had my browser narrow enough that at first I didn’t see any change with this code.
thesacredpath · Member · Feb 18, 2018 at 6:13 pm
Copy link
Hi @rufneoffice, if you wish the sidebar to be narrower down to the breakpoint when the sidebar moves down below the content for mobile and tablet, then change the 1000 to 850, and remove this.
margin-left: -55px;
from the .content-area declaration.
rufneoffice · Member · Feb 20, 2018 at 2:59 pm
Copy link
Great! Thanks for your help!
thesacredpath · Member · Feb 20, 2018 at 5:41 pm
Copy link
You are welcome.

No items found.