Tagged: sidebar
- This topic has 28 replies, 5 voices, and was last updated 11 years, 1 month ago by
Sarah.
-
AuthorPosts
-
May 10, 2013 at 10:54 pm #8786
paulinepkehoe
MemberHi,
How do I make the sidebar area less wide?
I like the width on this support page, if that helps?Thanks much, p
May 11, 2013 at 12:12 am #8792markspend1
MemberHey 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/
May 11, 2013 at 12:14 am #8793paulinepkehoe
MemberHmmm, thanks. Searched but did not get that link.
Appreciate it.May 11, 2013 at 12:45 am #8805Sakin
Keymaster@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%; } }
September 4, 2013 at 10:06 pm #14124rbrt_bene
MemberHy 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
RobertSeptember 5, 2013 at 2:09 am #14133Sakin
Keymaster@rbrt_bene: Send me your site URL and then I will check in.
September 5, 2013 at 2:33 am #14136September 5, 2013 at 11:56 am #14144Sakin
Keymaster@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%; } }
September 5, 2013 at 12:14 pm #14147rbrt_bene
MemberDear Sakin
thank you for your feedback. I implemented the CSS but nothing happens…
Can you advise?
Thank you
September 5, 2013 at 12:19 pm #14149Sakin
Keymaster@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.
September 5, 2013 at 12:22 pm #14152rbrt_bene
MemberHere it is: http://pastebin.com/e7yAvtWW
September 5, 2013 at 12:24 pm #14157Sakin
Keymaster@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%; } }
September 5, 2013 at 12:27 pm #14158rbrt_bene
MemberIt’s working now :)) Thank you very much for the great support!
Robert
October 9, 2013 at 2:58 pm #15722Sarah
MemberHi 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?
October 9, 2013 at 6:14 pm #15726Sarah
MemberAlso, can I reduce the padding in the widgets, they are so huge and I really want to tighten everything up a bit.
Cheers
Sarah
October 9, 2013 at 10:15 pm #15732Sakin
Keymaster@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; }
October 11, 2013 at 8:54 am #15817Sarah
MemberThanks Sakin, I used both codes and am happy with the result.
January 3, 2014 at 2:10 pm #18821Sarah
MemberHi 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; }
January 4, 2014 at 9:42 am #18838January 4, 2014 at 9:55 am #18841Sarah
MemberHi 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 -
AuthorPosts
- The topic ‘Sidebar’ is closed to new replies.