responsive columns question

[socialspark]

I'm using Bill Erickson's column code generator (http://www.billerickson.net/column-class-generator/) to create my columns for a 1280px wide page. I'm using centric-pro, with a text widget in the home-6 widget area containing one-sixth code for one row of logos, and then the one-fifth code for the next row of logos. When I change my screen width, the one-sixth row stacks at a narrow width, while the one-fifth logos get smaller and continue to span the width of the page. I would like them to decrease in size and span the page like the one-fifth column does. I can't see anything different between the one-sixth and one-fifth code. The images are all 120px x 120px.

I'm still fairly new at this, so I appreciate any help sorting this out. 🙂

Fran

http://bc5.23a.myftpupload.com/

[ᴅᴀᴠɪᴅ]

It's because fifth columns aren't included in Genesis by default. This is because they took the column measurements from bootstrap.

You have added the code correctly in the first part, but you now also need to include the fifths in the media queries towards the bottom of your stylesheet.

If you look in your stylesheet around line 2260 you will find

.five-sixths,
 .four-sixths, 
.home-widgets .featuredpost .entry, 
.one-fourth, 
.one-half, 
.one-sixth, 
.one-third, 
.three-fourths, 
.three-sixths, 
.two-fourths, 
.two-sixths, 
.two-thirds {
    margin: 0;
    width: 100%;
}

This is the part where the CSS tells the browser to change the widths to 100%. You need to add your fifth column in there. So like this

.five-sixths,
 .four-sixths, 
.home-widgets .featuredpost .entry, 
.one-fifth,
.one-fourth,
.one-half, 
.one-sixth, 
.one-third, 
.three-fourths, 
.three-sixths, 
.two-fourths, 
.two-sixths, 
.two-thirds {
    margin: 0;
    width: 100%;
}

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[socialspark]

Thank you, David. I didn't realize the column code was in the responsive section as well. So now they both look the same - stacked. But since you're a designer 🙂 I'll ask: don't you think it looks better shrunken down and still in rows than that looooong column of icons? They're not really a critical part of the information on the page, just who he's worked with.

Thanks again.
Fran

[Author]

Posts