A Fluid Footer

Published: March 28, 2016By Sebastian

Your layout should be almost completely fluid from top to bottom. All that remains are a few fluidity adjustments to the footer that you will be well versed in by now. Start by reviewing the fixed width elements in the footer:

expection-footer-inspection

  1. Right-click any text in the footer and choose Inspect to launch Chrome’s inspector.
  2. Click on the surrounding HTML to see which parent or sibling elements have fixed widths.
  3. You will notice three div elements with an id of colophon, site-info, and site-generator all have fixed width values. Make a note of these elements and their width values.

GUI Method

Make the #colophon wrapper fluid

fluid-colophon

  1. Double-click just under (but not on) the black line at the top of the footer area to launch the selector wizard.
  2. The Targeting tab should list selectors that target the #colophon div. If it doesn’t, you may need to use the  up arrow on the directional controls of the Inspector tab or double-click the footer again to re-target the #colophon.
  3. In the Name field, enter Colophon.
  4. In the Folder field, select Footer.
  5. Click the CREATE SELECTOR button.
  6. Go to the  Dimensions property group.
  7. Set the  width to 100%.

Make the #site-info div fluid

fluid-site-info

  1. Click the All tab even if you are on it already to ensure that the screen preview is full width.
  2. Double-click the site name in the footer to launch the selector wizard.
  3. Microthemer will target the link element by default.
  4. Go to the Inspector Inspector tab and click the  up arrow on the directional controls once to move up to the #site-info element.
  5. In the Name field, enter Site Info.
  6. In the Folder field, select Footer.
  7. Click the CREATE SELECTOR button.
  8. Ensure that you are on the All Devices tab.
  9. Go to the  Dimensions tab.
  10. Notice that the current  width is 700px.
  11. In the  width field enter: =%(700).
  12. Microthemer will auto-convert =%(700) to 74.468%.

Make the #site-generator div fluid

fluid-site-gen

  1. Double-click the ‘Proudly powered by WordPress’ link to launch the selector wizard.
  2. Click the  up arrow on the Inspector tab’s directional controls once to move up to the #site-generator element.
  3. In the Name field, enter Site Generator.
  4. In the Folder field, select Footer.
  5. Click the CREATE SELECTOR button.
  6. Ensure that you are on the All Devices tab.
  7. Go to the  Dimensions tab.
  8. Notice that the current  width is 220px.
  9. In the  width field enter: =%(220).
  10. Microthemer will auto-convert =%(220) to 23.404%.

Code Method

code-fluid-footer

Start a new line in the code area and type the following code:

#colophon {
    width: 100%;
}
#site-info {
    width: 74.468%;
}
#site-generator {
    width: 23.404%;
}

Some points to note:

  • The width values for the #site-info and #site-generator elements were calculated by converting their existing pixel values (700px and 220px) into percentages based on the width of their parent element (940px).

Your fluid footer should now scale down on smaller screens:

footer-result

Close