3-column Footer Widgets in Atmosphere Pro

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.

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;
	}
}