askdesign
12/9/2015 - 5:35 PM

Multi-Column Footer Widgets in Genesis

Sridhar Katakam

gistfile4.css
content_copyfile_download
/* 5-column Footer Widgets
--------------------------------------------- */

.footer-widgets-1, 
.footer-widgets-2, 
.footer-widgets-3, 
.footer-widgets-4,
.footer-widgets-5 {
	width: 16.6666666667%; /* 200px / 1200px */
	float: left;
}

.footer-widgets-1, 
.footer-widgets-2, 
.footer-widgets-3,
.footer-widgets-4 {
	margin-right: 4.1666666667%; /* 50px / 1200px */
}

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

	.footer-widgets-1, 
	.footer-widgets-2,
	.footer-widgets-3, 
	.footer-widgets-4,
	.footer-widgets-5 {
		width: 47.7083333333%; /* 458px / 960px */
	}

	.footer-widgets-1, 
	.footer-widgets-3 {
		margin-right: 4.5833333333%; /* 44px / 960px */
	}

	.footer-widgets-2,
	.footer-widgets-4 {
		margin-right: 0;
	}

}

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

	.footer-widgets-1, 
	.footer-widgets-2, 
	.footer-widgets-3, 
	.footer-widgets-4,
	.footer-widgets-5 {
		width: 100%;
	}

	.footer-widgets-1, 
	.footer-widgets-3 {
		margin-right: 0;
	}

}
gistfile3.css
content_copyfile_download
/* 4-column Footer Widgets
--------------------------------------------- */

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.footer-widgets-4 {
	width: 22%; /* 264px / 1200px */
	float: left;
}

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3 {
	margin-right: 4%; /* 48px / 1200px */
}

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

	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3,
	.footer-widgets-4 {
		width: 47.5%; /* 456px / 960px */
	}

	.footer-widgets-1,
	.footer-widgets-3 {
		margin-right: 5%; /* 48px / 960px */
	}
	
	.footer-widgets-2,
	.footer-widgets-4 {
		margin-right: 0;
	}

}

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

	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3,
	.footer-widgets-4 {
		width: 100%;
	}
	
	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3 {
		margin-right: 0;
	}

}
gistfile2.css
content_copyfile_download
/* 3-column Footer Widgets
--------------------------------------------- */

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3 {
	width: 30%; /* 360px / 1200px */
	float: left;
}

.footer-widgets-1,
.footer-widgets-2 {
	margin-right: 5%; /* 60px / 1200px */
}

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

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

}
gistfile1.css
content_copyfile_download
/* 2-column Footer Widgets
--------------------------------------------- */

.footer-widgets-1,
.footer-widgets-2 {
	width: 47.5%; /* 570px / 1200px */
	float: left;
}

.footer-widgets-1 {
	margin-right: 5%; /* 60px / 1200px */
}

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

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

	.footer-widgets-1 {
		margin-right: 0;
	}

}
functions.php
content_copyfile_download
//* Add support for 3-column footer widgets
add_theme_support( 'genesis-footer-widgets', 3 );
1info
content_copyfile_download
https://gist.github.com/srikat/70814344274fb2efe130#file-gistfile2-css

You can change these values depending on the wrap’s width and your desired space or gap between the columns.

Here’s a handy formula:

Width of each column in px = (wrap_width – ((no_of_columns – 1) × gap)) / no_of_columns

Width of each column in % = (Width of each column in px / wrap_width) * 100

Right margin in % = (gap / wrap_width) * 100