neilgee
3/26/2014 - 11:58 PM

Genesis Four Column Footer Widgets

Genesis Four Column Footer Widgets

/* 4-Column Footer (Overrides default 3-column setup in Genesis, so that code must remain in place)
---------------------------------------------------------------------------*/

.footer-widgets-1, 
.footer-widgets-2, 
.footer-widgets-3, 
.footer-widgets-4 {
	width: 21.875%; /* 252px / 1152px */
}

.footer-widgets-1, 
.footer-widgets-2, 
.footer-widgets-3 {
	float: left;
	margin-right: 4.166666666%; /* 48px / 1152px */
}
.footer-widgets-4 {
	float: right;
}
/*Breaking into 2 columns earlier than original code*/
@media only screen and (max-width: 1200px) {

	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3,
	.footer-widgets-4 {
		width: 47.9166666666%; /* 552px / 1152px */
		text-align:center; /*Centering content at this size*/
	}
	
	.footer-widgets-2 {
		float: right;
		margin: 0;
	}

}

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

	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3,
	.footer-widgets-4 {
		width: 100%;
	}
	
	.footer-widgets-1,
	.footer-widgets-2,
	.footer-widgets-3 {
		margin: 0;
	}
}
<?php
//* Do NOT include the opening php tag

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