- This topic has 7 replies, 2 voices, and was last updated 7 years, 5 months ago by
.
-
Posts
-
Just 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
Hello @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!!
Thanks 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!
DavidHello @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!!
Yes, 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!
Hello @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!!
Apologies, 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
Hello @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!!
- You must be logged in to reply to this topic.
