Genesis has built-in support for footer widgets (appearing above the footer) that can be enabled by adding the following in child theme’s functions.php:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //* Add support for 3-column footer widgets | |
| add_theme_support( 'genesis-footer-widgets', 3 ); |
by The second parameter in the above can be changed to reflect the number of footer widgets you would like to use.
In this article I would like to share sample CSS to display the footer widgets in columns. Responsive behavior taken care of. Though the code has been written for Genesis Sample child theme it should still work in other Genesis themes since the widths and right margin values are provided in percentages.
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
2-column Footer Widgets
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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; | |
| } | |
| } |
3-column Footer Widgets
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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; | |
| } | |
| } |
4-column Footer Widgets
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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; | |
| } | |
| } |
5-column Footer Widgets
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* 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; | |
| } | |
| } |
