• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

How do I change the width of my sidebars?

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › How do I change the width of my sidebars?

This topic is: not resolved

Tagged: adjust width, Sidebar

  • This topic has 3 replies, 4 voices, and was last updated 10 years, 1 month ago by afmastro.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 4, 2012 at 10:30 pm #3397
    vbrasil
    Member

    I want to change the width of my sidebar widget areas. I tried to change it in the styles.css folder and what occurs is the left side bar goes down. I am assuming because there is not enough width in the frame. I need to increase the size of the left sidebar 40px. I can reduce the right sidebar by the equivalent.  If I do reduce the right by the equivalent, I have pages on the site that use only the right sidebar and that may through off the main content section. So I need to change that as well, or if possible I can change it for this one page that uses both right and left content bars.

     

    Please help

    December 16, 2012 at 6:03 am #5515
    Brislon
    Member

    I'm trying to do the same - but can't find any information on how. Did you find the answer?

    Tim

    December 16, 2012 at 11:00 am #5556
    Susan
    Moderator

    If you wish to change the width of your sidebar, you need to change the width of other elements of your stylesheet as well.

    This mark-up guide should assist you in determing what to look for in your stylesheet to adjust:

    http://my.studiopress.com/docs/visual-markup-guide/

    December 21, 2012 at 9:20 am #6639
    afmastro
    Member

    Thanks for the visual markup guide. That was very helpful.

    I used this guide to change the column side bar and column widths, and I had an unintended consequence.

    I'm using the Bee Crafty Theme, and the sidebar / content / sidebar layout.

    I want #sidebar-alt and #sidebar to be 235 px each and #content to be 470px. Basically, I want the content to take up 1/2 the #inner area and each sidebar to take up 1/4 of the #inner area.

    I seem to have achieved that, except now the right-hand sidebar (#sidebar) is hanging out at the bottom of the screen.

    If you want to see, it is at http://upswingbabynames.com

    I think I need to change one of the float rules from right to left or left to right, but I'm not sure which one since my CSS is very rusty, as you can probably tell. Please excuse all of the CSS, but here is what I did.

    I would really appreciate it if some could lead me in the right direction. Thanks!

    ------------------------------------------------------------------------------------------------------------------------

    [The #inner rules/settings stayed the same]

    /***** Content-Sidebar Wrapper ********************/

    #content-sidebar-wrap {
    float: left;
    width: 705px;
    margin: 0;
    padding: 0;
    }

    .sidebar-content #content-sidebar-wrap, .content-sidebar #content-sidebar-wrap {
    width: 940px;
    }

    .sidebar-sidebar-content #content-sidebar-wrap, .sidebar-content-sidebar #content-sidebar-wrap {
    float: right;
    }

    /***** Content ********************/

    #content {
    float: left;
    width: 470px;
    margin: 0;
    padding: 0 5px;
    }

    .sidebar-content #content, .sidebar-sidebar-content #content {
    float: right;
    margin: 0;
    }

    .sidebar-content #content, .content-sidebar #content {
    width: 624px;
    margin: 0;
    }

    .sidebar-sidebar-content #content {
    float: right;
    width: 475px;
    margin: 0;
    padding: 0;
    }

    .sidebar-content-sidebar #content {
    width: 475px;
    margin: 0;
    padding: 0;
    float: left;
    }

    .full-width-content #content {
    width: 920px;
    margin: 0;
    }

    [I left the rest of the #content rules/settings unchanged]

    /***** Sidebar & Sidebar-Alt ********************/

    #sidebar {
    width: 235px;
    float: right;
    display: inline;
    font-size: 13px;
    line-height: 22px;
    margin: 0;
    padding: 0;
    }

    #sidebar-alt {
    width: 235px;
    float: left;
    display: inline;
    font-size: 11px;
    margin: 0;
    padding: 0;
    }

    .sidebar-content #sidebar, .sidebar-sidebar-content #sidebar {
    float: left;
    }

    .content-sidebar-sidebar #sidebar-alt {
    float: right;
    width: 210px;
    }

    .sidebar-sidebar-content #sidebar-alt, .sidebar-content-sidebar #sidebar-alt {
    float: left;
    width: 210px;
    }

    #sidebar .widget, #sidebar-alt .widget {
    margin: 0 0 15px 0;
    padding: 0 0 10px 0;
    }

     

    [I left the rest of the #sidebar and #sidebar-alt rules/settings unchanged]

     

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble