Background of Home Featured widgets – Minimum Pro

[curio]

I have spent an embarrassing amount of time trying to figure this out...

I know that the Home Featured widget area on Minimum pro is set up within the content area and therefore the background color for that section, when changed and visible, is 960px wide. I need to have the background color extend out to 100% of the page width.

How do I do this in Genesis? Add a new wrap? Insert a new div behind that one somehow? I just can't seem to make it work. I have the Simple Hooks plugin installed, if that makes things easier. Thanks in advance!

http://curioelectro.com/Blog/

[professorz]

I will chime in here. I would like the home featured widgets to all be 100% wide AND change the background colors. It does change the color to black but is only I guess the 960px as @curio posted above. I would like that entire section to be black with no white border or wrap. If you can help @Susan, I would be most grateful!

Thanks,
Jack

[professorz]

Forgot to add the URL where I'm trying to customize the theme:

http://bulliedatschool.com/WTTS/

Thanks!

[emasai]

Write a css rule for
.home-featured .wrap{
max-width: none;
}

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[professorz]

Thanks for the suggestion @emasai. Unfortunately, it does not seem to have fixed my problem. If you go to the url above and scroll down to the 2 kids giving thumbs up, I'd like the black to be full width. I'm using the featured page widget in that section. I'd like to figure this out because I have 2 other sections I want full width background colors for. Thanks!

Here's my css:

.home-featured {
border-bottom: 5px solid #f5f5f5;
margin-bottom: 10px;
padding: 10px 0px 10px 0px;
}

.home-featured li {
list-style-type: none;
}

.home-featured .widget {
padding: 0 20px;
}

.home-featured p:last-child {
padding: 0 0 24px;
}

.home-featured .wrap{
max-width: none;
}

.home-featured-1,
.home-featured-2,
.home-featured-3,
.home-featured-4 {
float: left;
text-align: center;
padding-top: 12px;
width: 100%;
}

.home-featured-2 {
background-color: #000000;
color: #fff;
max-width: 100%;
padding: 0;
margin: 0 auto;
}

.home-widgets-2 h1 {
font-size: 36px;
font-weight: 700;
line-height: 1.2;
text-shadow: 2px 2px rgba( 0, 0, 0, 0.1 );
}

[brock]

You want the black background to be full-width for the 'two kids giving thumbs up' widget, but you still want the white color above and below it, correct?

The problem is that you are fighting against the .wrap which contains everything and is forcing it to be narrow.

[professorz]

Hi Brock - I want the black home featured section to be full width with no white wrap. I also want one section to be full width blue and one to be full width red.

How do I alter/remove/edit the wrap so it doesn't restrict those .home-featured widgets to 960px, or whatever it is?

Thanks!

[professorz]

@brock - any idea what to do to force the home featured widgets to be full width with no white wrap?

Thanks!

[professorz]

I got it! Thanks to a post by Bill Erickson.

The change only needed to be made to the home page, so in front-page.php, I added:

//* Remove 'site-inner' from structural wrap
add_theme_support( 'genesis-structural-wraps', array(
'header',
'footer-widgets',
'footer'
) );

Link to Bill's post: http://www.billerickson.net/full-width-landing-pages-in-genesis/

Thanks to all for the help!

[Author]

Posts