[paulinepkehoe]

Hi,

How do I make the sidebar area less wide?
I like the width on this support page, if that helps?

http://www.beyouloveyou.com

Thanks much, p

[markspend1]

Hey Guys well i think that’s not much complicated task.You can do it by visit that url:

ablereach.com/wordpress/wide-sidebar-and-header-for-wordpress-default-theme/

[paulinepkehoe]

Hmmm, thanks. Searched but did not get that link.
Appreciate it.

[Sakin]

@paulinepkehoe: Catch Everest Pro theme is responsive design. So, it is not recommended to change the layout. If you change the layout. You need to change all the way down to mobile devices.

But if you just want to adjust only in the large screen, then add the following css in “Appearance => theme Options => Custom CSS” box.

@media screen and (min-width: 1060px) { 
#primary {
    width: 60%;
}
#secondary {
    float: right;
    width: 35%;
}
}

[rbrt_bene]

Hy Sakin,

I want also to reduce the size of the sidebar and tried the above mentioned CSS but nothing happens.

Can you please advise?

Thanx in advance
Robert

[Sakin]

@rbrt_bene: Send me your site URL and then I will check in.

[rbrt_bene]

http://comenzi.rapidpizza.ro/pizza/

[Sakin]

@rbrt_bene: You can add the following CSS in “Appearance => theme Options => Custom CSS” box.. The following CSS will work for screen size above 960px. Below 960 is mobile devices. So, I advice not to change that. Change

@media screen and (min-width: 960px) {	
#primary { width: 70%; }
#secondary { width: 25%; }
}

[rbrt_bene]

Dear Sakin

thank you for your feedback. I implemented the CSS but nothing happens…

Can you advise?

Thank you

[Sakin]

@rbrt_bene: I see you have issue in your custom css box. Can you paste all your CSS from custom CSS to http://pastebin.com/ and send me the url.

[rbrt_bene]

Here it is: http://pastebin.com/e7yAvtWW

[Sakin]

@rbrt_bene: There is missing closing } in your css. Please copy as below.

#hgroup-wrap { padding-bottom: 1rem; }
#site-logo { padding-top: 0; }
#secondary ul li { border-bottom: 1px solid #e6e6e6; }
.page .entry-title { display: none; }
.page.page-blog .entry-title { display: block; }
@media screen and (min-width: 960px) {	
#primary { width: 70%; }
#secondary { width: 25%; }
}

[rbrt_bene]

It’s working now :)) Thank you very much for the great support!

Robert

[Sarah]

Hi Sakin, I also find the sidebar too big. I have resized it according to your instructions above but with a much narrower gap between content and sidebar, see following:

@media screen and (min-width: 960px) {
#primary { width: 70%; }
#secondary { width: 29.5%; }
}

Now I would like to make the gap between the widgets (above and below) narrow too, can you advise me on the custom CSS please?

Sarah
http://thejuiceplanet.com

[Sarah]

Also, can I reduce the padding in the widgets, they are so huge and I really want to tighten everything up a bit.

Cheers

Sarah

[Sakin]

@Sarah: If you are talking about the the gap between the widgets then it’s margin button and you can adjust as per you need and add the following CSS in “Appearance => Theme Options => Custom CSS” box.

.widget {
    margin-bottom: 30px;
}

But if you are talking about the padding then it will be as below:

.widget {
    padding: 30px;
}

[Sarah]

Thanks Sakin, I used both codes and am happy with the result.

[Sarah]

Hi Sakin,
Since I changed from two to three columns the padding instructions you gave above no longer work. Can you help me with the custom CSS so that I can have a narrow gap between my three columns and the footer please?

Here is the custom CSS I currently have which isn’t working:

@media screen and (min-width: 960px) {
#primary { width: 70%; }
#secondary { width: 29.5%; }
}

.widget {
margin-bottom: 5px;
}

.widget {
padding: 10px;
}
.entry-title, .entry-title a { color: #cc6600; }

ins.adsbygoogle { padding-bottom: 30px; }

[Sakin]

@Sarah: Can you tell me the spaces that you want. I am bit confused.

[Sarah]

Hi Sakin,
When I had two columns I had primary at 70% and secondary at 29.5%, so I am guessing that meant I had 0.5% between the two columns. Now I have three columns and so I would like to have a really narrow space between the three columns. If you could give me the code I can play with the numbers to get the layout that looks right to me.

I also want to make the padding around the widgets narrower. You originally gave me the codes above which were:

.widget {
margin-bottom: 30px;
}

.widget {
padding: 30px;
}

Do these codes still apply or are the codes different now that there are two sidebars?

While I have you, is there any way to get rid of the big white space above the header image so that the header image starts immediately below the browser?

As much as I love the design of this template, overall everything is just too spaced out and I’m trying to tighten it up.

Hope that is easier to understand. Thanks 🙂
http://thejuiceplanet.com

[Author]

Posts