A Fluid Footer

Make the #colophon wrapper fluid

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

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

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%.

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).