One-half columns in Home Top area…what's the best way?

Community Forums Forums General Discussion One-half columns in Home Top area…what's the best way?

This topic is: resolved

This topic contains 7 replies, has 2 voices, and was last updated by  nutsandbolts 11 months, 3 weeks ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #82207

    rcwatson
    Member
    Post count: 18

    I have the Executive Pro child theme of Genesis. I need to insert two one-half columns in the Home-Top area, with the slider above it and the Home-Middle below it.

    I’ve added two “Text” widgets to the Home-Top area, but they currently display in the one-third column configuration, leaving me with a blank third column. I’d like these to take up 50% each of the width of the Home-Top widget area.

    I’ve tried putting <div class=”one-half first”> around the content of the first Text widget and then <div class=”one-half”> around the content of the second Text widget. That didn’t work. I tried modeling it using Chrome Inspector on the local cache to see if I could make it happen, but the one-half class doesn’t seem to work quite the way I want on any of the elements. I even went into the template and tried hardcoding it, but can’t figure out how.

    What’s the best way?

    http://stage.custombuiltwindows.com
    #82316

    nutsandbolts
    Keymaster
    Post count: 3202

    If you use column classes, the contents of the two text widgets should be combined. So you’d have one text widget set up like this:

    <div class="one-half first">
    Content currently in the first text widget
    </div>
    <div class="one-half">
    Content currently in the second text widget
    </div>

    Hopefully that makes sense!


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #82500

    rcwatson
    Member
    Post count: 18

    Thanks. Problem is, that just “squishes” it into the first column. Have a look at http://stage.custombuiltwindows.com/

    #82501

    nutsandbolts
    Keymaster
    Post count: 3202

    Find this in your stylesheet:

    .home-middle .widget,
    .home-top .widget {
    	float: left;
    	padding: 0 2.8%;
    	width: 33.3333333333%;
    }

    And change it to this:

    .home-middle .widget {
    	float: left;
    	padding: 0 2.8%;
    	width: 33.3333333333%;
    }

    That will allow the widget to take up the entire widget area instead of being limited to 1/3 of it.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #82519

    rcwatson
    Member
    Post count: 18

    Hmm. Problem is that the template and styles seems to assume one always wants the top and middle widgets divided into thirds. Is there a way to differentiate and customize these on an as-needed basis?

    #82521

    nutsandbolts
    Keymaster
    Post count: 3202

    Yes, that’s what I was doing above – removing the CSS that makes the home top area divide itself into thirds, but leaving it for the home middle area.


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

    #82525

    rcwatson
    Member
    Post count: 18

    Ah, ok. I get it. Just to be sure, I made things very explicit:

    .home-top .widget {
    	float: left;
    	padding: 0 2.8%;
    	width: 100%;
    }
    
    .home-middle .widget
    {
    	float: left;
    	padding: 0 2.8%;
    	width: 33.3333333333%;
    }

    It works the way I intended now.

    Thanks.

    #82526

    nutsandbolts
    Keymaster
    Post count: 3202

    You may want to check your media queries to be sure it displays okay on mobile, but otherwise I’m glad to hear it’s working. I’m going to mark this topic as resolved but feel free to open a new one if needed. :)


    Andrea Whitmer, Owner, Nuts and Bolts Media
    I provide dev and training services for web designers • Find me on Twitter and Google+

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

You must be logged in to reply to this topic.