CSS Sidebar Size Error
-
I have been trying to edit the sidebars of my website to make them larger to take out some of the empty space between the sidebars and content area. I know about doing them in proportion with each other using the CSS percentages, adjusting the margin and content area etc. But when I try to adjust the sidebar on the right (which is the #secondary code) it doesn’t seem to do anything. #content and #extra-sidebar works just not the one. I am using wordpress 3.3.2 with all updates and the NomNom theme which is just Twenty Eleven with some extra bells and whistles.
This is the website I am working on http://joshscarttest.x10.mx/wp/
Here is the code I am working with
.three-column #page { max-width: 1000px;}
.three-column #primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
padding-bottom: 30px;
}
.three-column #content {
margin: 0 34% 0 26.4%;
width: 46.4%;
height: 400px;
background-color: #eaeaea;
border-top:solid #181818 20px;
-moz-border-radius: 15px;
border-radius: 15px;
box-shadow: 10px 10px 5px #888;
}
.three-column #secondary {
float: right;
margin-right: 2.6%;
width: 20.8%;
height: 400px;
background-color: #eaeaea;
border-style:solid;
border-width:2px;
border-color:#181818;
border-top:solid #181818 20px;
-moz-border-radius: 15px;
border-radius: 15px;
box-shadow: 10px 10px 5px #888;
}
.three-column #extra-sidebar{
position:relative;
float: left;
width: 20.8%;
margin-left: -70%;
height: 400px;
background-color: #eaeaea;
border-top:solid #181818 20px;
-moz-border-radius: 15px;
border-radius: 15px;
box-shadow: 10px 10px 5px #888;
}
-
Are you using Firebug to view the pages “live” so you can see what the code is actually doing?
That secondary sidebar is being styled from this file:
http://joshscarttest.x10.mx/wp/wp-content/plugins/twenty-eleven-theme-extensions/moztheme2011.css?ver=3.3.2on line 28:
.moz-widget-list-adjust #secondary { width: 20.3%; }I am using firebug, probably just looked at the left sidebar and assumed it was the same for all of them XD.
Thanks for the reply. And should I add the margin info on the .moz-widget or adjust that with the style.css?It should ideally be done in style.css, but it may not work because of overriding of the .moz-widget stylesheet… in that case, change the selector or put in the other stylesheet…But do be aware that if you do the latter, that CSS will be gone if you ever need to deactivate that plugin — so not so great in that respect.
Ok, thanks for the help.
The topic ‘CSS Sidebar Size Error’ is closed to new replies.