Expand Content Width, Move Over Sidebar

[hzepeda]

Hi there

I am trying to increase the width of my content section, but I don't want to reduce the width of my right sidebar. I see that there's a lot of whitespace to the right of my sidebar, so I'm hoping that I can just bump it over to the right, and use that extra space to make my content section wider. Any way to do that? I'm using the Sixteen Nine theme.

Thanks!

http://www.himayzepeda.com

[Lauren @ OnceCoupled]

Hard to explain, but if you play around in your browser's inspector you can see that the white space to the right of the sidebar can't "simply" be used by you. That is, there is a structure to your site:

.site-inner
     .content-sidebar-wrap
          .content
          .sidebar

Your site-inner has a width that ends at the right of the sidebar: 1040.
Your content width: 760.
Sidebar: 240.

There is exactly 40px of extra space (between the content and sidebar) that can be used - so you can change your content width to 800.

If you need a larger-still content area, you'll need to also increase the width of your site-inner, which means in turn looking at the width of its parents elements and expanding them. Once you've done that, you'll need to look at your media queries and make sure they still apply appropriately to your current sizes.

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Porter]

What exactly is the relation in size concerning the media queries? I did a similar change myself (expanded the width), but my site doesn't display properly on mobile now. (I assume this isn't thread hijacking, since it's related and will likely be asked by the OP)

---

Buy me a beer? | Try DigitalOcean VPS Hosting

[Lauren @ OnceCoupled]

Hey Porter,

I'm not sure off hand, without having a pretty in-depth look at your site. Have you used a browser inspector before? Getting familiar with one of these can be really helpful in visualizing the layout of your site: http://www.studiopress.com/tips/using-firebug.htm.

When you re-size your browser, the media queries will populate, so you can see the effect of those without necessarily needing to actually view your site on a mobile device. 🙂

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Author]

Posts