Modern Portfolio Layout Issue

Community Forums Forums General Discussion Modern Portfolio Layout Issue

This topic is: not resolved

This topic contains 14 replies, has 5 voices, and was last updated by  Erica Mueller 1 year, 1 month ago.

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #44037

    Erica Mueller
    Participant
    Post count: 17

    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

    #44045

    sangfroidweb
    Participant
    Post count: 38

    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 :)

    #44046

    rfmeier
    Participant
    Post count: 596

    Erica,

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

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

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

    I hope this helps.


    #44050

    rfmeier
    Participant
    Post count: 596

    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.


    #44051

    rfmeier
    Participant
    Post count: 596

    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.


    #44550

    Erica Mueller
    Participant
    Post count: 17

    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

    #44551

    Erica Mueller
    Participant
    Post count: 17

    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

    #44557

    rfmeier
    Participant
    Post count: 596

    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.


    #44577

    sangfroidweb
    Participant
    Post count: 38

    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 :)

    #44579

    Bill Murray
    Participant
    Post count: 572

    @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: http://wpperform.com or Twitter: @wpperform

    We do managed WordPress hosting.

    #44610

    Bill Murray
    Participant
    Post count: 572

    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: http://wpperform.com or Twitter: @wpperform

    We do managed WordPress hosting.

    #44633

    Tony @ AlphaBlossom
    Participant
    Post count: 460

    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.

     

     


    #44640

    Bill Murray
    Participant
    Post count: 572

    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: http://wpperform.com or Twitter: @wpperform

    We do managed WordPress hosting.

    #44643

    Tony @ AlphaBlossom
    Participant
    Post count: 460

    @Bill Murray,

    Thanks Bill…I think that’s a great move!

    Take care,

    Tony


    #45099

    Erica Mueller
    Participant
    Post count: 17

    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

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.