Community Forums › Forums › Archived Forums › Design Tips and Tricks › Splitting the Parallax Pro footer widgets area into multiple columns
Tagged: css, parallax-pro, widgets
- This topic has 11 replies, 5 voices, and was last updated 9 years, 6 months ago by
suburbanite.
-
AuthorPosts
-
May 7, 2015 at 11:34 am #150727
brightisland
ParticipantI 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?
May 7, 2015 at 1:57 pm #150762Johann Kratzik
MemberDo 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
May 8, 2015 at 10:11 am #150959brightisland
ParticipantI think three columns would be sufficient. Thank you!
And I'm happy to donate, by the way.
May 8, 2015 at 12:50 pm #150985Johann Kratzik
MemberDid 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
May 8, 2015 at 1:36 pm #150994brightisland
ParticipantI 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
May 9, 2015 at 7:59 am #151227Johann Kratzik
MemberOpen functions.php and search for the line
add_theme_support( 'genesis-footer-widgets', 1 );
Replace this withadd_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
May 20, 2015 at 4:15 pm #152978jbendiner
MemberHi 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?
May 20, 2015 at 8:45 pm #153027Genesis Developer
MemberMay 20, 2015 at 8:51 pm #153028jbendiner
Memberthank you!
July 16, 2015 at 1:50 pm #159594suburbanite
MemberI 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?
July 16, 2015 at 2:24 pm #159596jbendiner
MemberHi 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;
}July 16, 2015 at 2:30 pm #159597suburbanite
MemberThanks 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!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.