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

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:

Subscribe for updates

Enter your email address below. I’ll send you updates & news to your email address. You can unsubscribe at any time.


Posted

in

by


Comments

4 responses to “How To Make Twenty Seventeen Footer Content Be 50% Equal Width”

  1. zesco avatar
    zesco

    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.

  2. ROdrigo avatar
    ROdrigo

    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

    1. Bharat Karavadra avatar

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

Leave a Reply to zesco Cancel reply

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

>