3-column Footer Widgets in Atmosphere Pro

Updated on November 12, 2020

This tutorial provides the steps to change the footer widget area in Atmosphere Pro such that three widgets appear side-by-side versus the default, one.

Tested in Atmosphere Pro 1.1.3.

Step 1

In functions.php, change

// Add support for 1-column footer widget.
add_theme_support( 'genesis-footer-widgets', 1 );

to

// Add support for 3-columns footer widgets.
add_theme_support( 'genesis-footer-widgets', 3 );

Step 2

In style.css, add the following above the media queries:

.footer-widgets .wrap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}

.footer-widgets .wrap::before,
.footer-widgets .wrap::after {
	display: none;
}

@media only screen and (max-width: 800px) {
	.footer-widgets .wrap {
		grid-template-columns: 1fr;
		gap: 60px;
	}
}