Seeking Assistance for Footer Columns &#8211; Altitude Pro

Member

I am using Altitude Pro, which came with one footer area. When adding multiple widgets to Footer 1, they appear stacked/vertical on the website. I would like my footer to contain three columns instead. I tried updating my Theme Functions to:

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

I then added one widget each to Footer 1, Footer 2 and Footer 3 -- but they still appear stacked on the website. How can I get them to display in side-by-side columns instead?

Thank you!

January 14, 2017 at 1:38 pm #199398

Participant

You could copy out the associated CSS from the genesis sample theme:


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

.footer-widgets {
	background-color: #fff;
	font-size: 18px;
	font-size: 1.8rem;
	clear: both;
	padding: 60px 0;
}

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3 {
	width: 380px;
}

.footer-widgets-1 {
	margin-right: 70px;
}

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

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

@media only screen and (max-width: 1340px) {

	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3 {
		width: 340px;
	}

	.footer-widgets-1 {
		margin-right: 60px;
	}

}

@media only screen and (max-width: 1200px) {

	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3 {
		width: 300px;
	}

	.footer-widgets-1 {
		margin-right: 30px;
	}

}

@media only screen and (max-width: 1023px) {

	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3 {
		width: 100%;
	}
	
	.footer-widgets-1,
	.footer-widgets-2 {
		margin: 0 auto 40px;
	}

}

January 14, 2017 at 1:39 pm #199399

Participant

You will need to adjust the CSS to match the theme you're using. The background for example.

January 14, 2017 at 4:21 pm #199405

Member

I now have three columns -- thanks for the quick response! One other question - the footers aren't aligned. Footer 1 and Footer 2 widgets are aligned at the top of the footer (which is what I want), but the widgets in Footer 3 start much lower. Any suggestions?

January 14, 2017 at 5:15 pm #199407

Participant

Probably because the container for the three columns ".footer-widgets" needs to be added to the list of the Float Clearing.

Before:

/* Float Clearing
--------------------------------------------- */

.author-box:before,
.clearfix:before,
.entry:before,
.entry-content:before,
.pagination:before,
.site-container:before,
.site-footer:before,
.site-header:before,
.site-inner:before,
.widget:before,
.wrap:before {
	content: " ";
	display: table;
}

.author-box:after,
.clearfix:after,
.entry:after,
.entry-content:after,
.pagination:after,
.site-container:after,
.site-footer:after,
.site-header:after,
.site-inner:after,
.widget:after,
.wrap:after {
	clear: both;
	content: " ";
	display: table;
}

AFTER


/* Float Clearing
--------------------------------------------- */

.author-box:before,
.footer-widgets:before,
.clearfix:before,
.entry:before,
.entry-content:before,
.pagination:before,
.site-container:before,
.site-footer:before,
.site-header:before,
.site-inner:before,
.widget:before,
.wrap:before {
	content: " ";
	display: table;
}

.author-box:after,
.footer-widgets:after,
.clearfix:after,
.entry:after,
.entry-content:after,
.pagination:after,
.site-container:after,
.site-footer:after,
.site-header:after,
.site-inner:after,
.widget:after,
.wrap:after {
	clear: both;
	content: " ";
	display: table;
}

Other than that, without a link, it's a guess.

January 16, 2017 at 6:31 pm #199518

Member

Updating the Float Clearing section didn't help. The link is http://test.ecrewcoaching.com. If you have any other suggestions, I'd appreciate it. Thank you!

January 16, 2017 at 6:45 pm #199519

Participant

That's because your .wrap max-width is 1200px so you would adjust the first set of rules divide 1200 by 3 = 400 - the right margin - 70 = 330, so where it reads width: 380px you'd change to 330px.

January 17, 2017 at 5:41 pm #199586