Full width div on page

[Carly Gardner]

Hey Bill,

I’m trying to find a way to have a full width background to a section like you do on the home page with #home-one and so on.

On the http://www.innernutritionist.com/duplicate/nutrition-psychology/ page I’m just trying to have the grey background stretch the whole screen.

I’ve got a div class set up with 100% width but obviously that isn’t the way to do it. I haven’t seen this anywhere in the forums yet. Let me know if you can help!

Thanks, Greg

[Bill Robbins]

Hi Greg,

Good question. On pages other than the home page, there is a “wrap” that sets a maximum width for the content on the page and also centers the content. What you’ll need to do is set the wrap on that page to be 100% width instead of the default. Here’s how to do that:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   .page-id-2649 .wrap {
   	width: 100%;
   }
   
   .page-id-2649 .wrap #content {
   	padding-left: 0;
   	padding-right: 0;
   }
   

3. Update your settings.

That should set the wrap to be 100% width. It’ll also remove the padding on the content area which would also keep the box from the edge. Let me know if you have any questions.

Have a great day,
Bill

[Carly Gardner]

Thanks again! You 100% have the best support I’ve ever seen for wordpress themes. My company will definitely be buying more of your themes!

-Greg

[Bill Robbins]

Thanks Greg…I really do appreciate it 🙂

[Author]

Posts