Title: Sidebar/ Content Width
Last modified: August 21, 2016

---

# Sidebar/ Content Width

 *  Resolved [drive4corners](https://wordpress.org/support/users/drive4corners/)
 * (@drive4corners)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/sidebar-content-width/)
 * Hi there,
 * I was happy with this theme so far, but was curious how I could modify the theme
   slightly to widen my content area and either push the sidebar outward, or if 
   I could slightly reduce the width of the bar.
 * I think I found where the code is determining the width, but have not yet confirmed:
 * /* Sidebar */
    #secondary { float: left; margin-left: 3.06%; width: 31.28%; }
 * Is it as simple as changing the width value in my child theme??
 * Thanks In Advance– definitely contemplating the premium version Attitude Pro!

Viewing 15 replies - 1 through 15 (of 21 total)

1 [2](https://wordpress.org/support/topic/sidebar-content-width/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/sidebar-content-width/page/2/?output_format=md)

 *  [LauraHartwigDesign](https://wordpress.org/support/users/laurahartwigdesign/)
 * (@laurahartwigdesign)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/sidebar-content-width/#post-4201524)
 * Yes, that looks like the width of the sidebar, but you might have to also change
   the size of the main content area. Just give a link to your site if you need 
   more help.
 * Also, be sure to make changes through Custom CSS so your changes won’t be overwritten
   with any updates!
 *  Thread Starter [drive4corners](https://wordpress.org/support/users/drive4corners/)
 * (@drive4corners)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/sidebar-content-width/#post-4201527)
 * Thanks for the response Laura,
 * The website is:
    [http://drive4corners.com/](http://drive4corners.com/)
 * I added the following to Theme Options -> Custom CSS but have not noticed any
   changes on my main blog feed(homepage) or my post pages.
 *     ```
       #secondary {
        width: 21.28%;
        }
        #primary {
        width: 75.64%;
        }
        @media only screen and (max-width: 1078px) {
        #primary,
        #secondary {
        width: 100%;
        }
        }
       ```
   
 *  [LauraHartwigDesign](https://wordpress.org/support/users/laurahartwigdesign/)
 * (@laurahartwigdesign)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/sidebar-content-width/#post-4201529)
 * Hi,
    Please try refreshing your browser and look again. That is definitely affecting
   your site. To see what I mean, change that 75.64% to 25% and you will see a big
   change. It is affecting all the pages that I see.
 * If it looks okay, please mark as resolved. Thanks!
 *  Thread Starter [drive4corners](https://wordpress.org/support/users/drive4corners/)
 * (@drive4corners)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/sidebar-content-width/#post-4201531)
 * Ok, I see what you mean, Laura.
 * My intent was to increase the total width so that content width becomes closer
   to 1000pixels maximum as opposed to the current ~750pixels. Therefore, when the
   page is enlarged, my posts and such (mainly images) display larger – as opposed
   to so much blank whitespace.
 * Maybe this has to do with the following parameter I found in functions.php?? 
   What css code would I add to change this?
 * `$content_width = 700;`
 *  [LauraHartwigDesign](https://wordpress.org/support/users/laurahartwigdesign/)
 * (@laurahartwigdesign)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/sidebar-content-width/#post-4201532)
 * Hi,
    Maybe I’m confused about what you want. Your total site width is 978px wide(
   for regular desktop displays). Is that what you want to change? Your content 
   can’t be 1000px if your total site is only 978. That is controlled by
 *     ```
       .container {
        width: 978px;
        margin: 0 auto;
       }
       ```
   
 * After changing that, you can make your #primary and #secondary larger or smaller
   depending on what you want. Of course, it looks like you have most of your images
   cropped to around 670px, so if you want those to expand, you will have to put
   in larger images. Does that make sense?
 *  Thread Starter [drive4corners](https://wordpress.org/support/users/drive4corners/)
 * (@drive4corners)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/sidebar-content-width/#post-4201533)
 * You are correct, the goal is to widen the total container so content width is
   wider, (and now I know I can size the sidebar to the appropriate % that I want).
 * I added your code from above with 1278px and am not getting a change.
    I apologize
   for the illiteracy, but does that section of code need to be nested below the#
   primary line?
 * PS- I hope my browser cache isn’t throwing me off again.
 *  [LauraHartwigDesign](https://wordpress.org/support/users/laurahartwigdesign/)
 * (@laurahartwigdesign)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/sidebar-content-width/#post-4201537)
 * My fault. Please try
    #container instead of .container
 * no, it doesn’t matter where it is in your Custom CSS.
 *  Thread Starter [drive4corners](https://wordpress.org/support/users/drive4corners/)
 * (@drive4corners)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/sidebar-content-width/#post-4201539)
 * Gotcha!
 * Ok that worked, but now it looks like the content is spaced to the right starting
   at the same location as before. AKA what would be the left sidebar is pushing
   the content out towards the right.
 * Any way to reduce this imaginary left-page whitespace?
    I am sticking to right
   sidebar only.
 *  [LauraHartwigDesign](https://wordpress.org/support/users/laurahartwigdesign/)
 * (@laurahartwigdesign)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/sidebar-content-width/#post-4201548)
 * Okay, let’s try this:
 *     ```
       .container, #container {
         width: 1278px;
       }
       ```
   
 *  Thread Starter [drive4corners](https://wordpress.org/support/users/drive4corners/)
 * (@drive4corners)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/sidebar-content-width/#post-4201551)
 * That did something different.
 * Now the content is is sized appropriately but the sidebar is extending past the
   main header (on the right side).
 * Is there a margin value controlling this?
 *  [LauraHartwigDesign](https://wordpress.org/support/users/laurahartwigdesign/)
 * (@laurahartwigdesign)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/sidebar-content-width/#post-4201561)
 * Okay, this is pretty confusing because I don’t see your .container at all and
   you have #container set to 1078px instead of the 1278px you talked about before.
   If you are really okay with it being a little smaller, perhaps try this:
 * `#container, .container {width: 1078px}`
 *  Thread Starter [drive4corners](https://wordpress.org/support/users/drive4corners/)
 * (@drive4corners)
 * [12 years, 8 months ago](https://wordpress.org/support/topic/sidebar-content-width/#post-4201568)
 * I tried it Laura, but it did not do what I was looking for.
 * For now, it seems like the following is satisfactory, thanks for your help!
 *     ```
       #container {
        width: 1078px;
        margin: 0 auto;
       }
       ```
   
 *  [drag0n70](https://wordpress.org/support/users/drag0n70/)
 * (@drag0n70)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/sidebar-content-width/#post-4201602)
 * Laura,
    i see that you are a lot prepared. I need 1 thing. I need that the sidebar
   dosn’t go down when the size of browser is 1024px (width). Now for this dimension
   of windows’s browser the sidebar go down. It’s possible to change something in
   attitude css for change this?
 * Plese tell me how made this.
    Thank you!!
 *  [LauraHartwigDesign](https://wordpress.org/support/users/laurahartwigdesign/)
 * (@laurahartwigdesign)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/sidebar-content-width/#post-4201604)
 * Hi [@drag0n70](https://wordpress.org/support/users/drag0n70/)
    A link to your
   site would be helpful. Have you changed the size of the container, primary, or
   secondary? You do realize that the theme is responsive and the sidebar is supposed
   to drop down on smaller screens, right? Send me the link to your site and I can
   figure out what changes you need to make.
 *  [drag0n70](https://wordpress.org/support/users/drag0n70/)
 * (@drag0n70)
 * [12 years, 7 months ago](https://wordpress.org/support/topic/sidebar-content-width/#post-4201606)
 * The problema is simple.
 * I set narrow layout.
 * The attitude theme resize its width below certain thresholds.
    For example under
   1079px resize le with a lot and the sidebar go down. Why 1079px and not 1023px
   or smaller?
 * So for those who still have the screen set to 1024px (a lot of peaple) can’t 
   see the sidebar at the side but these sidebar moves under at the bottom of the
   page.
 * It’s possible to change the thresold of 1079px to another more smaller that 1024px?
 * There is other solution to visualize the sidebar however?

Viewing 15 replies - 1 through 15 (of 21 total)

1 [2](https://wordpress.org/support/topic/sidebar-content-width/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/sidebar-content-width/page/2/?output_format=md)

The topic ‘Sidebar/ Content Width’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/attitude/4.0.5/screenshot.png)
 * Attitude
 * [Support Threads](https://wordpress.org/support/theme/attitude/)
 * [Active Topics](https://wordpress.org/support/theme/attitude/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/attitude/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/attitude/reviews/)

 * 21 replies
 * 5 participants
 * Last reply from: [LauraHartwigDesign](https://wordpress.org/support/users/laurahartwigdesign/)
 * Last activity: [11 years, 9 months ago](https://wordpress.org/support/topic/sidebar-content-width/page/2/#post-4201647)
 * Status: resolved