The Footer 1 widget and Social navigation icons area in the footer of Twenty Seventeen are narrower than the Footer 2 widget and ‘Proudly powered by WordPress’ text area. All these widgets / areas can be made an equal width of 50% of the width of the content area.
The default footer widget areas.
The footer widgets/ content areas made equal width.
The footer widgets/ content areas made equal width.
Where and how to make the widget / content areas equal width:
In WordPress Admin > Appearance > Edit CSS.
Enter the CSS code below.
The CSS code:
/* Footer 1 content */
@media screen and (min-width: 48em) {
.site-footer .widget-column.footer-widget-1 {
/* float: left; */
width: 47%;
}
}
/* Footer 2 content */
@media screen and (min-width: 48em) {
.site-footer .widget-column.footer-widget-2 {
/* float: right; */
width: 47%;
}
}
/* Social icons */
@media screen and (min-width: 48em) {
.social-navigation {
/* clear: left; */
/* float: left; */
/* margin-bottom: 0; */
width: 47%;
}
}
/* Site info (Proudly powered by WordPress) */
@media screen and (min-width: 48em) {
.site-info {
/* float: right; */
width: 47%;
}
}
Hello Bharat
What do I have to write if I want to merge both footers? I want to have a large one instead of two.
Thanks
Rodrigo,
Try the following code which should make the first footer widget full width and not display the second footer widget.
@media screen and (min-width: 48em) {.site-footer .widget-column.footer-widget-1 {
width: 100%;
}
}
.footer-widget-2 {
display: none;
}
Hello Bharat,
what do I have to write if I want 3 footer areas? I want to have 3 widget area on bottom, instead of two.
Thanks.
zesco,
Try this: http://jimmyknoll.com/how-to-add-a-third-footer-widget-to-twenty-seventeen/