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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
.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; } } |
Leave a Reply