How To Make Twenty Seventeen Footer Content Be 50% Equal Width

March 1, 2017

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.


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%;
	}
}
Share this:
About Bharat Karavadra

"I research and share leading-edge information, tools and exercises to help people transform and heal their life situations."

Share your thoughts

Your email address will not be published. Required fields are marked

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

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
Bharat Karavadra