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

Posted on 1 March 2017 in Twenty Seventeen Theme Customisation
Comments: 4

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:

Tags


Leave a Reply

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"}
Do NOT follow this link or you will be banned from the site!