CSS Layout & Responsive Design
Educational Notes (Quick Links)
- HTML and CSS Basics
- Floating Elements
- Nested Elements
- Negative Margin & Float Layout
- ‘Float’ Over ‘Position’ Sometimes
- The ‘Position’ Property
- Adaptive Images
- Use Media Queries Sparingly
- CSS Inheritance
- Source Order, Specificity, And !important
- Display (Inline vs Block)
- Pseudo Elements
- Pseudo Classes
Heads up! this post was created when Microthemer was at version 4. The current version is 7. Some references to the interface may be out of date.
Your conversion to a fluid layout is complete. Congratulations. You can now add a sprinkling of screen-specific styles wrapped in media queries to finish your responsive conversion.
Your fluid layout scales gracefully on a diverse range of screen sizes. This is certainly a big improvement. But it hasn’t completely eliminated ‘breakpoints’ – points at which your site looks ugly.
Hover your mouse over the top left corner where the rulers meet to preview the site at common mobile sizes (e.g. Apple iPhone 4). You will notice that the content and sidebar look very squashed together. To combat this, you need to:
You’ve converted Twenty Ten’s fixed layout into a fluid one in quite a subtle way. On larger screens the site looks exactly the same. It’s only when you drag the site preview down that its fluid nature becomes evident. But as you drag, you will notice some cracks appearing (breakpoints).
Breakpoints are not necessarily dramatic. A subtle annoyance is also worthy of fixing. Drag the horizontal ruler to the 980px screen size mark. The grey background that frames the page on large screens disappears apart from a small area at the top. The remaining background no longer frames anything. It has become a pointless grey bar. This is your first breakpoint.
You may also notice that the search form button falls down to a new line at 740px. This is your second breakpoint.
Create Media Queries That Correspond To Breakpoints
In the How Responsive Web Design Works section you learned the purpose of a media query – to place a condition on whether certain CSS styles have an effect or not. In this section, you will learn how to craft your own media queries in order to fix the breakpoints in Twenty Ten.
Microthemer suggests 4 media queries by default when you first install it.
In Microthemer, media queries have descriptive labels for your own reference. So @media (max-width: 767px) has the label Tablet & Phone. This label was used because styles applied to screens up to 767px will apply to tablets and phones, generally speaking. There is nothing special about the default media queries Microthemer suggests. They are the ones Bootstrap used when it was a desktop-first framework. But they can be customized to better match your theme’s breakpoints.
To align your media queries with the 2 breakpoints I flagged:
Go to the Desktop & Tablet tab. The preview width will adjust according to the max-width: 979px condition. The shading of the horizontal ruler illustrates the new scope of the media query. The dark part of the ruler will now span from 0 to 979px, rather than 768px to 979px. So given the new scope, the styles you add to the modified Desktop & Tablet tab will apply to any screen size from 0 to 979px wide. Where as before, the styles would only apply to screen sizes in the range of 768px and 979px.
Start a new line at the very bottom of the code area and type the following code:
Some points to note:
Add Screen-Specific Styles To Fix Breakpoints
Fix Breakpoint 1: Grey Bar
Fix Breakpoint 2: Search Form & Squashed Sidebar
You could make the search input and button fill the full width of the sidebar on separate lines to tidy things up. But the sidebar is starting to get a bit cramped at 740px wide. And an even smaller sizes, its width of 23.404% will be two narrow. A better solution is to move the sidebar down beneath the main content before lack of space makes it look squashed and unsightly. The result will be a single column layout.
Fix Breakpoint 1: Remove Grey Bar
Place your cursor in between the curly braces for the Desktop & Tablet media query and set the top margin of the wrapper element to 0, resulting in the following code:
Some points to note:
Fix Breakpoint 2: Single Column Layout
Place your cursor in between the curly braces for the Tablet & Phone media query and enter some new selectors and styles, resulting in the following code:
Some points to note:
Use Media Queries Sparingly
Many phones have screen widths as low as 320px (e.g. iPhone 4 and 5). Most are below 480px, so a @media(max-width: 480px) media query will cover them all. No need for an extra @media(max-width: 320px) media query. The less media queries you create, the less work you have to do. It’s fine to initiate changes before too little or too much screen space makes it essential. For instance, you may notice that a row of buttons become too squashed at 320px. It’s OK to stack the buttons vertically at the 480px mark. Even though there is still enough room for the buttons to be side by side at 480px.
I find that four to six media queries are usually enough for a whole website. You may prefer more. The key is to find a balance between looking perfect at every screen size and not amplifying your workload with too many media queries.
CSS inheritance saves you time. You can define global styles, and then override them on a more granular level. The W3C describes CSS inheritance as such:
Inheritance in CSS is the mechanism through which certain properties are passed on from a parent element down to its children.
If you apply a color value of red to the body element, all text elements inside will become red too. But this color value can be overridden by setting a different color on the child elements inside the body element. If you set color to blue on h1 elements for instance, they would be blue instead of inheriting the red color from the body.
Not all CSS properties are inherited. Only those that make sense to inherit. Such as color, text-align, cursor, font-weight, letter-spacing, and many more. Padding, margin, or border for instance are not inherited. You may find this resource on inheritance useful.
Source Order, Specificity, And !important
Microthemer writes media query styles after everything else in the stylesheet. They are last in source order. Because they come last, they override competing prior styles. But source order only comes into play if the CSS specificity is equal. If a selector is more specific than another, it will override it, regardless of source order. But what makes a style rule more or less specific?
Here is some example HTML code for a link:
And here are 3 CSS selectors that set the text color of the link:
So if all 3 of these style rules are present, what color will the link be?
Blue. Because the blue style belongs to a selector that references the id attribute (#site-link). Ids are more specific than classes (.home-link) and simple tag names (a).
The specificity of a selector is quantifiable. When an id is referenced by use of the # character, it counts for 100 specificity points. A class (.) or pseudo selector (:) counts for 10 specificity points. And an element’s tag name (a, p, h1 etc) counts for 1 specificity point. CSS selectors often have more than one tag name, class, or id reference. The total specificity score is what matters.
Microthemer exploits the rules of CSS specificity to override styles. Microthemer writes all styles to a single stylesheet: /wp-content/micro-themes/active-styles.css. This is a non-destructive method. Theme styles are not deleted. And theme updates won’t wipe out Microthemer customisations.
If enabled in the preferences, Microthemer adds the !important declaration to all styles e.g.
When !important is applied, CSS specificity score becomes redundant. The style with !important wins. Adding !important in the example above would make all the links red, not blue. CSS specificity score only comes back into play when competing styles both have !important.
Selectors inside media queries do not have higher specificity than those outside media queries. In terms of specificity score, media queries add zero.