A Fluid Header

A Fluid Banner Image

At smaller screen sizes, the banner image gets cut off instead of scaling down. You can fix this by creating a selector that targets the banner image and then apply new styles to it.

1. Click the All Devices tab to reset the preview to full width.
2. Double-click the banner image.
3. Go to the Targeting tab of the selector wizard that appears on the right if you’re not on it already.
4. The first suggestion in the list, which is selected by default, will do fine: div#branding img
5. In the Name field, enter Banner Image.
6. In the Folder field, select Header.
7. Click the CREATE SELECTOR button.
8. Go to the Dimensions property group.
9. Set  width to 100%.
10. Set  height to auto (if you want the image to scale down proportionally).

Drag the preview screen width slider down and try not to be too disappointed. The image will still be stubbornly rigid. You have stumbled across the Nested elements pitfall. A common cause of CSS confusion.

The image doesn’t scale down because it is inside another fixed width element. The fixed width parent element doesn’t adjust to screen size. And so the image will be 100% of a fixed width, which is equivalent to having a fixed width itself. The first step to solving this problem is to identify which parent element has a fixed width value.

1. Right-click the banner image and choose Inspect to launch Chrome’s inspector.
2. In the pane on the left, the line of HTML for the image will be highlighted.
3. Click on the line of HTML that corresponds to the banner image’s first parent. This will be the first line of HTML above the currently highlighted line that is slightly indented to the left. Hint: the line that starts with <div id=“branding”…
4. Observe the CSS styles in the right pane. You may need to scroll.
5. The #branding element does indeed have a fixed pixel value for width of 940px.
6. The #branding element is therefore the element that must be changed. If it didn’t have a fixed value for width you would need to check this on the next parent element.

The second step is to make the fixed width #branding element fluid via Microthemer:

1. Double-click the banner image to launch the selector wizard.
2. Go to the Inspector tab if you’re not there already.
3. Click the  up arrow on the directional controls once to move up to the div element that has an id of ‘branding’.
4. Microthemer’s blue highlighting won’t give you any useful feedback because the branding element wraps only floating elements, and unlike the header element, has no padding. It’s total height is therefore 0.
5. In the Name field, enter Branding.
6. In the Folder field, select Header.
7. Click the CREATE SELECTOR button.
8. Go to the property group.
9. Set  width to auto.

Drag the preview width slider down and rejoice. The image should scale down and finally the site is starting to look slightly responsive!

A Fluid Main Menu

You may notice that the main menu is still rigid. As before, the trick is to identify which elements have fixed width properties.

Menus always contain nested HTML elements. As was the case with the banner image, the nesting isn’t always obvious. Chrome’s inspector can give you the insights you need though.

1. Click the All Devices tab even though you should already be on it for the purpose of setting the site preview to full width again. Alternatively, drag the top horizontal ruler to the far right.
2. Right-click the first menu item (‘Home’) and choose Inspect to launch Chrome’s inspector.
3. Click the lines of HTML above to see which parent elements have fixed widths.
4. Notice that a div element with a class of menu-header and another div element with an id of access both have fixed width values. Remember, an element has a fixed width if the CSS pane on the right reports a width value in pixels (px). Make a note of these HTML elements.
5. Double-click the menu area to the right of the menu links (the empty black area) to launch the selector wizard.
6. Go to the Targeting tab if you’re not on it already.
7. This is where you will do things slightly differently. Copy the following selector in the list: div#access.
8. Go to the Inspector tab.
9. Click the down arrow on the directional controls once.
10. Click the  right arrow on the directional controls once.
11. The HTML shown below the directional controls should be: <div class=”menu-header”>…</div>
12. Go to the Targeting tab.
13. Insert your cursor at the end of the first selector in the list: div#access div.menu-header
14. Type a comma and then paste the code you copied resulting in: div#access div.menu-header, div#access
15. Using a comma allows you to apply the same styling to multiple selectors without having to repeat style values.
16. In the Name field, enter Menu Containers.
17. In the Folder field, select Header.
18. Click the CREATE SELECTOR button.
19. Go to the  Dimensions tab.
20. Set  width to 100%.
21. Drag the preview screen width down. The header should be looking better at smaller screen sizes now.

Fluid Site Meta

The site title and site description, which are normally on the same line as each other, split onto two separate lines on small screens. This isn’t a catastrophe design wise, but it’s an accidental consequence. You can fix it by making the site title and description fluid too.

1. Right-click the site title text and choose Inspect to launch Chrome’s inspector.
2. Click on the nearby lines of HTML above and below to see which parent and sibling elements have fixed pixel (px) widths.
3. You will notice that two div elements with an id of site-title and site-description have fixed width values of 700px and 220px respectively. Make a note of these.

A Fluid Site Title

1. Click the All Devices tab even though you should already be on it for the purpose of setting the site preview to full width again.
2. Double-click the site title to launch the selector wizard.
3. Go to the Inspector tab.
4. If the HTML code below the directional controls displays: <a>…</a>, you have targeted the link (<a>) HTML element nested inside the #site-title element. In which case, click the  up arrow on the directional controls twice until the value beneath shows: <div id=”site-title”>…</div>. Note, if the code on the inspector tab already shows <div id=”site-title”>…</div>, you don’t need to click the up arrow at all.
5. Go to the Targeting tab.
6. The default CSS selector suggestion at the top of the list will be: div#branding h1#site-title. This is unsuitable because the Twenty Ten theme uses a div element instead of a h1 element for all pages except the home page. So to make the selector target the site title on every single page, remove the h1 resulting in: div#branding #site-title.
7. In the Name field, enter Site Title.
8. In the Folder field, select Header.
9. Click the CREATE SELECTOR button.
10. Go to the  Dimensions tab.
11. Notice that the current  width of the site title is 700px.
12. Click the All Devices tab even if you are already on it to ensure that the site preview is full width. This is necessary for the following auto-conversion to work correctly.
13. In the  width field enter: =%(700). This tells Microthemer to calculate 700px as a percentage of the parent container’s width (which Microthemer will can tell is 940px).
14. Microthemer will auto-convert =%(700) to 74.468% and explain how the calculation was done in the notification at the top right.

A Fluid Site Description

1. Double-click the site description text to launch the selector wizard.
2. Microthemer should target the correct element first time. This will be displayed under the directional controls on the Inspector tab: <div id=”site-description”>…</div>
3. In the Name field, enter Site Description.
4. In the Folder field, select Header.
5. Click the CREATE SELECTOR button.
6. Go to the Dimensions tab.
7. Notice that the current  width of the site description is 220px.
8. In the  width field enter: =%(220)
9. Microthemer will auto-convert =%(220) to 23.404%.

The site title and description will continue to stack side by side on smaller screens now. Some extra work will be needed for tidiness, but we can leave that for now.

A Fluid Banner Image

1. Right-click the banner image and choose Inspect to launch Chrome’s inspector.
2. Notice that the image has no id or class attribute. The banner image can still be targeted though. The selector used in Twenty Ten’s stylesheet provides inspiration: #branding img (Chrome reports this in the CSS pane on the right).
3. Start a new line in the code editor and type the following code:

#branding {
   width:auto;
}
#branding img {
   width:100%;
   height:auto;
}

Some points to note:

• Two selectors were required. One for the banner image (#branding img) and another for the parent branding element (#branding). The branding element has a fixed width by default. In order for the image to behave in a fluid way, the branding element also needs to be fluid.
• The #branding img selector uses a technique for targeting an element based on the id of its parent. The banner image doesn’t have it’s own id for use with a straightforward hash-prefixed (#) selector. But by specifying the context of the parent element (that does have an id) and then typing the image’s tag name, separated by a space, it’s possible to target the image precisely. There are no other images inside the branding element. If there were, #branding img would target all of them.
• Setting height to auto ensures that the banner image scales down proportionally.  Otherwise it would be 198px tall, as per the height attribute in the image’s HTML.
• Decrease the preview width and observe how the banner image scales down now.

A Fluid Main Menu

1. Right-click the first menu item (‘Home’) and choose Inspect to launch Chrome’s inspector.
2. Click on the HTML lines above to see which parent elements have fixed widths.
3. You will notice that a div element with a class of menu-header and another div element with an id of access both have fixed width values. Make a note of these.
4. Start a new line in the code editor and type the following code:

#access, #access .menu-header {
   width:100%;
}

Some points to note:

• Using a comma allows you to apply the same styling to multiple selectors without having to repeat style values. This selector makes both fixed width elements fluid in one quick go.
• #access .menu-header is used instead of just .menu-header because the Twenty Ten theme uses #access .menu-header. This has higher specificity (110) than .menu-header by itself (10). And in order for Microthemer to override styles set by Twenty Ten, the selectors must have equal or greater specificity. The educational note on CSS specificity later in this tutorial explains the rules.

A Fluid Site Title

1. Right-click the site title text and choose Inspect to launch Chrome’s inspector.
2. Click on the HTML lines above to see which parent elements have fixed widths.
3. You will notice a div element with an id of site-title has a fixed width value of 700px.
4. Click on the HTML line for the branding div just above the site-title div.
5. Click on the Computed tab in Chrome’s inspector (near the top right). The diagram shows that the branding div has a width of 940px. Make a note of this.
6. Start a new line in the code editor and type the following code:

#site-title {
   width: 74.468%;
}

Some points to note:

• The objective here is to give the site title the same width of 700px but define this as a percentage so it shrinks on smaller screens. With the help of Chrome’s inspector you discovered that the parent branding element has a width of 940px. So 700px as a percentage of 940px is 74.468% (700/940*100).

A Fluid Site Description

1. Right-click the site description text and choose Inspect to launch Chrome’s inspector.
2. Click on the HTML lines above to see which parent elements have fixed widths.
3. You will notice a div element with an id of site-description has a fixed width value of 220px.
4. The HTML shows that the branding div is also the direct parent of the site-description. You know it’s width to be 940px.
5. Start a new line in the code area and type the following code:

#site-description {
   width: 23.404%;
}

Some points to note:

• A similar calculation to the one used for the site-title was performed. 220px as a percentage of 940px is 23.404% (220/940*100).