Home › Forums › Free Themes › Magazine Plus › Controlling sidebar column widths separately in 3-column layout
- This topic has 7 replies, 2 voices, and was last updated 7 years, 2 months ago by
wensolutions.
-
AuthorPosts
-
June 24, 2017 at 4:45 pm #46056
dsteiner
ParticipantJust curious, is it possible to modify the CSS to control the width of the sidebar columns separately? The default is:
.three-columns-enabled #primary {
display: inline-block;
float: none;
width: 50%;
}
.global-layout-three-columns .sidebar{
float: right;
}
.three-columns-enabled .sidebar{
width: 25%;It appears that I can change the widths, but the sidebars always match width. What I would would ideally like is:
Primary: 60%
Right Sidebar: 25%
Left Sidebar: 15%Thanks!
David
June 26, 2017 at 1:05 am #46133wensolutions
KeymasterHello @dsteiner,
To adjust the width of the widget area use below given CSS.
For this go to Admin Panel > Appearance > Customize > Additional CSS and paste below given CSS.
#sidebar-front-page-widget-area { width: 60%; } div#sidebar-secondary { width: 15%; }
Hope this helps.
Best Regards!!
June 26, 2017 at 6:19 am #46174dsteiner
ParticipantThanks for your response. Unfortunately, that code changes both sidebars to the same value. Ideally, I would like to set different values for the left sidebar and the right side bar. They would be:
Left sidebar: 15%
Primary: 60%
Right sidebar: 25%Is there any code that would allow me to set values of the sidebars independent of one another? Thanks!
DavidJune 26, 2017 at 7:01 am #46177wensolutions
KeymasterHello @dsteiner,
As far as we have checked the CSS locally it is working fine.
So please share your site URL so that we could look further into the issue .
Hope you understand.
Best Regards!!
June 26, 2017 at 9:26 am #46183dsteiner
ParticipantYes, the CSS is working fine as written, but my hope was that there was something that I could add which would allow me independent control of the left and right sidebar widths. Left: 15% width, Right: 25% width.
Site is http://ecommwire.com
Thanks!
June 27, 2017 at 12:32 am #46234wensolutions
KeymasterHello @dsteiner,
The right sidebar already has the width of 25% so the CSS we have provided will individually control the width of the left side bar as 15% and front widget area as 60% . We have provided the CSS targeting the secondary sidebar and front page widget area .
Hope this clears up the confusion .
If you need any assistance further please let us know .
Best Regards!!
June 27, 2017 at 8:27 am #46248dsteiner
ParticipantApologies, that code did, indeed, control just the left sidebar. I had applied it within the style.css file rather than using the additional CSS field.
Many thanks!
David
June 28, 2017 at 12:10 am #46286wensolutions
KeymasterHello @dsteiner,
Please once try by replacing the CSS we have provided with the CSS given Below .
.three-columns-enabled #primary { width: 60%; } div#sidebar-secondary { width: 15%; }
Also please do not directly change your original style.css file . You can place the additional CSS either in child theme or in Additional CSS field as mentioned above . In this way your original modification wont be lost .
Hope this helps .
Best Regards!!
-
AuthorPosts
- You must be logged in to reply to this topic.