Modern Portfolio Layout Issue

[Erica Mueller]

http://www.ericamuellerdesigns.com/

I'm working on getting this set up today and for the life of me can't figure out why the black areas for Welcome and Services are not spanning the full width of the page like they do on the demo:

http://demo.studiopress.com/modern-portfolio/

I have not edited anything in the CSS except to change the M to EM on the header and this issue was occuring before that change, so I'm quite certain I haven't broken anything.

I do plan to make edits in the future but right now, it's exactly what I downloaded and installed.

Help!

---

WordPress Manipulator

[sangfroidweb]

Hi! It looks like you got this sorted out. Let me know if you have other issues or if I'm looking at the wrong thing.
🙂
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[rfmeier]

Erica,

Your page has a .wrap element within the #inner element containing the following css styling;

.wrap, #header, #inner {
    margin: 0 auto;
    max-width: 1080px;
}

Hence, causing the content to not span the whole width.

I hope this helps.

---

Ryan Meier – Twitter

[rfmeier]

Erica,

Thinking about this more.  Are you using the correct page layout?  I am guessing the extra element causing the content not to span is from a setting or something similar.

---

Ryan Meier – Twitter

[rfmeier]

Looking at this even more, the code I initially posted isn't the issue.  Your page does not seem to be following the same structure as the theme demo.

---

Ryan Meier – Twitter

[Erica Mueller]

The instructions for setting up this theme do not say which page layout to use as the default:

http://my.studiopress.com/setup/modern-portfolio-theme/

I've tried both content/sidebar and full width and neither works.

Like I said, I haven't changed widths or anything in the CSS so I'm confused.

---

WordPress Manipulator

[Erica Mueller]

Is it showing up right for you? I have viewed in both Firefox and Chrome and that black area just won't span the whole width of the site. It looks really crummy for me. 🙁

---

WordPress Manipulator

[rfmeier]

Nope, it is still restricted to a width. From the Chrome styling debuggers, I can see your site has a different html structure compared to the demo site.

---

Ryan Meier – Twitter

[sangfroidweb]

Hey!! I see what you are talking about now...I'm sorry, I missed it before. It looks like you may have Genesis structural wraps enabled which is adding that extra .wrap div inside of the .inner div. That .wrap is being constrained by the css found on line 387:

.wrap, #header, #inner {
margin: 0 auto;
max-width: 1080px;
}

Structural wraps may be activated on purpose, and if it is, you will need to just re-adjust the CSS to accommodate that (I can look at that for you if you need help) . If it's not on purpose, then you should just remove the code that is enabling the structural wraps for the #inner div.

Check your functions file for code that looks like the code from this snippet:

//* Add support for structural wraps
add_theme_support( 'genesis-structural-wraps', array(
'header',
'nav',
'subnav',
'inner',
'footer-widgets',
'footer'
) );

This code is enabling the extra wrap for each of the divs listed in the function. Here is a link to the snippet explanation: http://my.studiopress.com/snippets/structural-wraps/

Check that out and let me know. Hope this makes sense!

Thanks!

Liz 🙂

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[Bill Murray]

@sangfroidweb - Good guess and suggestion, but I don't think that's the issue here.

@Erica Mueller - Are you running the Genesis 2.0 beta1? The last time I checked on this theme, the 2.0 beta added the extra wrap inside the #inner, and that's the source of your problem. I haven't had a chance to try this on the newly released beta2, but if you update, and it still proves to be a problem, you might want to raise a support ticket for it. Your site would work fine with the current stable release of Genesis.

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[Bill Murray]

After taking another look, the problem is that even in the Genesis 2.0 beta 2, in lib/init.php on line 64, Genesis 2.0 is adding a structural wrap by default, whereas 1.9 didn't do that.

The change is in this line:

add_theme_support( 'genesis-structural-wraps', array( 'header', 'menu-primary', 'menu-secondary', 'site-inner', 'footer-widgets', 'footer' ) );

'site-inner' (or inner) wasn't included in the array under 1.9.2. Whether that's a design decision or a bug, dropping 'site-inner' from the array will fix your problem, but that involves modifying Genesis core, which isn't good. If you're developing on the beta and it's something SP plans to fix prior to release (which you might learn if you raise a ticket and point them to this thread), it might keep you on track for the short term.

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[Tony @ AlphaBlossom]

I hope I don't confuse things by jumping in here, but I have a recommendation that should easily take care of your issue.

Try adding this to your child theme style.css file:

#inner > .wrap {
max-width: 100%;
}

I would add it after ".wrap, #header, #inner" around line 387.

 

 

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[Bill Murray]

I sent a tweet to Nathan Rice and he replied that a fix has been implemented so that when Genesis 2.0 goes to release candidate it won't add a structural wrap to the #inner div for XHTML.

@Tony - Your fix should also work and probably won't hurt anything in CSS if the structural wrap is removed, but once the structural wrap is removed by the change in Genesis core, it will be targeting a class that no longer exists so can be deleted.

---

Web: https://wpperform.com or Twitter: @wpperform

We do managed WordPress hosting.

[Tony @ AlphaBlossom]

@Bill Murray,

Thanks Bill...I think that's a great move!

Take care,

Tony

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[Erica Mueller]

Ah ha! Yes, I did decide to use the new Beta version on this site. So glad someone caught that!

I'll downgrade to the stable version till 2.0 is released.

Y'all are awesome!

---

WordPress Manipulator

[Author]

Posts