Increasing width of content area?

[seanerin72]

Hello folks,

So I am new to all things Genesis framework and have been trying to sort through things on my own.  I am using the prose child theme.  The latest genesis updates mentions that I can increase the width of the content area.  Alas, I cannot figure out HOW to do that.  Any help would be appreciated. Thank you.

Sean

[Jon Bellah]

Sean,

It's always helpful to post links to your site, so we can give specific help. However, you can change the width of the content area by changing the width of these selectors in the style.css file:

#content {
 float: left;
 width: 440px;
 padding: 15px;
}

.content-sidebar #content,
.sidebar-content #content {
 width: 610px;
 padding: 15px;
}

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

.full-width-content #content {
 width: 960px;
 padding: 0;
}

---

Follow me on the Twitters at @JonBellah. I blog about web design, development and a lot about Genesis at CSSForge.com

[wendycholbi]

If you're using Prose, you'll want to copy the CSS Jon provided into the Genesis --> Custom Code --> Custom CSS field, instead of modifying any style.css files. Make your changes on the Custom Code screen and save changes -- makes testing and tweaking very easy.

---

I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

[seanerin72]

Thank you Jon and Wendy... I posted the code into the custom css field and the result was that my sidebar was pushed to the bottom of the page.  The genesis framework 1.9 demo site gives an indication to the width that I would like for my site: http://www.genesisframework.com

Currently, reset to its original width, my site looks like this: http://www.blackboarddreams.com

So, how can I tweak my settings so that my site looks more like the width of the demo site?

Thank you so much for your help...

Sean

[seanerin72]

Sorry for posting again, but I tried this:  I posted the following code:

body {
background: #f5f5f5;
margin: 0 auto;
width: 1100px;
}

This happened: http://www.blackboarddreams.com

As you can see, the page itself increased in width, but the content did not "scale" with accordingly.  How do I change that?

Also, on an unrelated aesthetic note, at the very bottom of the page the "search" button is actually a few pixels wider than the search form.  How can I change that?

Again, thank you so much for your help thus far.  As you can see, I am merely in the beginning stages of my site.

Sean

[wendycholbi]

Hi Sean,

I didn't see your site during the period when the sidebar was pushed to the bottom, but it looks like you at least got the sidebar back in place.

(Can I just say, I admire how you've customized Prose so far? A beautiful custom header, some nice styles in the nav and background, and it looks completely custom designed. Nice work!)

Okay, you've got your body width set to 1100 pixels. Now you need to widen several boxes (divs) that are inside the body div. Refer to the Genesis Visual Markup Guide to see which pieces you need to widen (although that guide doesn't show the footer widgets, which we'll get to in a second).

The divs you need to change the widths of are probably going to be #inner, #content-sidebar-wrap, #content, and #sidebar.

I would start by putting something like this into Genesis --> Custom Code --> Custom CSS (and this is only for the sidebar-on-the-right layout; if you have pages with no sidebar or pages that use two sidebars, you'll need some additional tweaking to cover those layouts):

#inner {
width: 1100px;
padding: 0 20px;
}
.content-sidebar #content-sidebar-wrap {
width: 1060px;
}
.content-sidebar #content {
width: 690px;
}
.sidebar {
width: 350px;
}

This is a starting point; tweak these numbers if you want. If the widths of the content div and the sidebar add up to wider than their container, the sidebar will get pushed down, which you've already experienced.

To get the footer widgets to stretch across your wider site, put this code into Genesis --> Custom Code --> Custom CSS:

.footer-widgets-1, .footer-widgets-3 {
width: 335px;
}
.footer-widgets-2 {
width: 340px;
}

That should get you started. Hope this helps!

---

I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

[seanerin72]

Wendy, that was fabulous help!!! Thank you so much and thank you for the feedback on my site!  I figure another couple weeks of tweaking and I will be ready to add content 🙂

[seanerin72]

So, I think I am making progress, but I wonder about this page: http://www.blackboarddreams.com/category/humancondition/

Beyond my home page, I plan to use full page templates.  In the above page the content does not quite make it over to the right side of the page.  How can I ensure that the content on full page templates spans the entire page?

Thank you!

[wendycholbi]

Hi Sean,

Try adding this code:

.full-width-content #content {
width: 1060px;
}

Tweak the width to suit you. If you have lines of text that are actually that long, though, they might end up being hard to read, so you might want a slightly narrower width but centered on the page, with something like this:

.full-width-content #content-sidebar-wrap {
width: 100%
float: none;
}
.full-width-content #content {
width: 925px;
margin: 0 auto;
}

Let me know how it goes!

---

I love WordPress, Genesis, and the Prose child theme (my complete guide to using Prose is here: SiteSetupKit.com). Say hi on Twitter: @wendycholbi

[abackpackerstale]

Hi I been reading the discussion above. I'm trying to do the same thing, but having problems.

I want to make the content area wider. I feel everything is smashed in the middle.

No matter what values I play with on the above CSS I can not get the page wider.

All I accomplished was to smash the sidebar in a 100 directions :).

What did you do Seanerin?

My site: http://www.abackpackerstale.com/

[abackpackerstale]

Hi I have been reading the discussion above. I'm trying to do the same thing.

I want to make the page wider. I feel like everything is smahed in the middle.

No matter what vaules I play with from the above CSS I can't make the acutally width of the whole page (content/sidebar) wider.

What am I doing wrong.

My Site: http://www.abackpackerstale.com/

Thanks

[seanerin72]

Hi, on your dashboard, click on custom code under the genesis tab.  Within the custom css box, I posted the following code:

body {
background: #f5f5f5;
margin: 0 auto;
width: 1100px;
}

#inner {
width: 1100px;
padding: 0 20px;
}
.content-sidebar #content-sidebar-wrap {
width: 1060px;
}
.content-sidebar #content {
width: 740px;
}
.sidebar {
width: 300px;
}
.full-width-content #content {
width: 1040px;
}

.footer-widgets-1, .footer-widgets-3 {
width: 335px;
}
.footer-widgets-2 {
width: 340px;
}

Visiting the following link will give you a sense of which areas of your site are being affected by the numbers included.

http://www.studiopress.com/images/gen_markup.png

Additionally, my site is currently set for a width of 1100px so all numbers thereafter (for content, sidebar, and footers) are managed accordingly.  Keep in mind as you adjust the number for the content area (740 px for me) you must also adjust the sidebar number (300 px for me).

As much help as I have gotten here, I hope that I have been of some help to you.  Take care.

Sean

[pritamnagrale]

Hi,

I am new & don't have much idea on designing part. I have checked everything here & implemented on my blog Getsarkarinaukri.co.in but I am not able to increase my content & sidebar width.

I want to increase content width & sidebar width on my website getsarkarinaukri.co.in but the its not getting changed at all.

I am using Magazine theme.

Thanks,

 

[dstrange26]

Hello, I'm new to all this and have tried some of the code above to enlarge my web page.  I am using the Prose child theme with a sidebar, content, sidebar layout.  Using Sean's code, I do get a wider page, however, my Secondary Navigation bar is not in line with either the left or right sidebar.  Also, my header image did not resize to the wider page.  I'm assuming that is due to the fact that I didn't change the dimensions of the header image.  Additionally, the content is not re-displaying the text to the bigger width of the  content area.  It is still wrapping as if the content width was smaller. Any help with this would be very helpful

 

Thanks

[Kidrock]

I used Sean's code above for my site and was able to increase the content area. However, the problem is that my site is not mobile responsive now after adding the code. Site failed the google mobile-friendly test. Any code to add to the above code to make my site mobile responsive again?

However, when I activated Mobile Theme in Jetpack plugin, my site is mobile-friendly. But this solution hides Secondary Navigation Menu (Center Menu) in mobile display.

Appreciate any suggestions. Thanks.

---

Work Money Fun

[Author]

Posts