Create 4 Columns Footer Widget Area

Normally SP themes are supporting the 3 columns footer widget area. In this article I will show you how to create 4 columns footer widgets area with responsive effect.

First open the functions.php file on Theme editor ( Dashboard->Appearance->Editor) or download the file via FTP/File Manager and open it on Notepad+ or any PHP editor. In maximum themes you will get this line

add_theme_support( 'genesis-footer-widgets', 3 );

Change the value 3 to 4.

If your theme is not supporting the footer widgets then add this line in the file

add_theme_support( 'genesis-footer-widgets', 4 );

Now you need to modify the style.css file.

.footer-widgets-1,
.footer-widgets-2,
.footer-widgets-3,
.footer-widgets-4 {
  width: 23.076923076923077%;
  float: left;
  margin-left: 2.5%;
}

.footer-widgets-1 {
  margin-left: 0px;
}

@media only screen and (max-width: 1139px) {
   .footer-widgets-1,
   .footer-widgets-2,
   .footer-widgets-3,
   .footer-widgets-4{
     width: 48.717948717948715%;
   }
  
  .footer-widgets-1,
  .footer-widgets-3 {
     margin-left: 0px;
  }
}

@media only screen and (max-width: 1023px) {
 .footer-widgets-1,
 .footer-widgets-2,
 .footer-widgets-3,
 .footer-widgets-4 {
   width: 100%;
   float: none;
   margin-left: 0;
 }
}