Home Forums Free Themes Magazine Plus Controlling sidebar column widths separately in 3-column layout

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #46056
    dsteiner
    Participant

    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

    #46133
    wensolutions
    Keymaster

    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!!

    #46174
    dsteiner
    Participant

    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!
    David

    #46177
    wensolutions
    Keymaster

    Hello @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!!

    #46183
    dsteiner
    Participant

    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!

    #46234
    wensolutions
    Keymaster

    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!!

    #46248
    dsteiner
    Participant

    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

    #46286
    wensolutions
    Keymaster

    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!!

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.