Splitting the Parallax Pro footer widgets area into multiple columns

[brightisland]

I really like the Parallax Pro theme. My only complaint is I'd like to be able to split the footer into three or four columns.

How can I do this?

[Johann Kratzik]

Do you need 3 or 4 columns? Coding doesn't make much difference but I'd like to reply as exactly as possible

---

Offering customization work for FREE – Read more

[brightisland]

I think three columns would be sufficient. Thank you!

And I'm happy to donate, by the way.

[Johann Kratzik]

Did you already make some modifications to the Parallax theme? You didn't post a link to a website so I can't see.

If you didn't modify the files then I can install the original theme locally, go through the changes and then post them into the thread so you can paste them into your files. This will be some code because the columns must also work responsive.

In case you modified the files I can post my email address here so you can send me the files. Or you give me FTP access to your server if you want.

A donation will be highly appreciated, thank you in advance! 🙂

---

Offering customization work for FREE – Read more

[brightisland]

I have made a lot of modifications to the stylesheet, although I don't remember making any modifications to functions.php.

I'm continually tweaking the stylesheet, but I'm happy to e-mail you the files as they are now. I'm pretty decent with CSS, but as far as PHP goes, I know just enough to be dangerous. 😀

My e-mail is [email protected] so you can go ahead and e-mail me there and I'll respond with the files. I'm assuming you just need the stylesheet and functions.php, right?

Thank you!

Sara

[Johann Kratzik]

Open functions.php and search for the line add_theme_support( 'genesis-footer-widgets', 1 );
Replace this with add_theme_support( 'genesis-footer-widgets', 3 );
This will give you 3 widgetized areas in the footer.

In style.css search for the "Footer Widgets" part and add there:

.footer-widgets-1, .footer-widgets-2, .footer-widgets-3  {
width: 33%;
}

so they will float side by side.

But we also must take care of the responsive layout because 3 floating columns will not look good on small screen resolutions. I suggest 2 floating columns for tablet resolutions and the third widget area in full width below. And 3 full width widget areas for phone resolutions.

In style.css search for @media only screen and (max-width: 960px)and add to this rule:

.footer-widgets-1, .footer-widgets-2  {
width: 50%;
}

and

.footer-widgets-3  {
clear: both;
width: 100%;
padding-top: 20px; /* so that there's some spacing between the top columns and the third one, adjust to your needs */
}

In style.css search for @media only screen and (max-width: 768px)and add to this rule:

.footer-widgets-1, .footer-widgets-2  {
width: 100%;
}
.footer-widgets-2 {
padding-top: 20px;
}

---

Offering customization work for FREE – Read more

[jbendiner]

Hi Johann,
I also tried to implement your code. I started with the basic desktop view of 3 widgets floating side by side, with the css code:

.footer-widgets-1, .footer-widgets-2, .footer-widgets-3 {
width: 33%;
}

In my screen the 3 widgets show one under the other... any idea why?

http://www.logisticsnetworkdesign.com

[Genesis Developer]

Controlling Footer Widget Columns from Theme Settings Page in Genesis

---

Download Genesis Featured Posts Combo Widget | Simple Grid Layouts Plugin for Posts, CPTs and terms
You can request new tips/help.

[jbendiner]

thank you!

[suburbanite]

I am having the same problem. I have tried everything listed here and every time the footer widgets end up on top of each other. Any ideas?

http://www.angelawdesign.com

[jbendiner]

Hi Angela
Don't recall how i resolved this but here is the code in my style.css for entire footer widget section
Hope this helps

/*
Footer Widgets
---------------------------------------------------------------------------------------------------- */

.footer-widgets {
background-color: #f04848;
clear: both;
font-size: 24px;
padding: 100px 0;
text-align: center;
}

.footer-widgets,
.footer-widgets a:hover {
color: #fff;
}

.footer-widgets a {
color: #fff;
}

.footer-widgets .widget {
margin-bottom: 40px;
}

.footer-widgets p:last-child,
.footer-widgets .widget:last-child {
margin-bottom: 0;
}
.footer-widgets-1, .footer-widgets-2, .footer-widgets-3 {
width: 33%;

}
.footer-widgets-1,
.footer-widgets-2 {
float: left;
}

.footer-widgets-3 {
float: right;
}

[suburbanite]

Thanks for your response. Yes, that's what I've done as well as adding this to my functions.php doc

/** Add support for 3-column footer widgets **/
add_theme_support( 'genesis-footer-widgets', 3 );

but still no luck!

[Author]

Posts