Media Queries

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.

media-queries-intro

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:

  1. Identify breakpoints.
  2. Create media queries that correspond to breakpoints.
  3. Add screen-specific styles to fix breakpoints.

Identify Breakpoints

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

breakpoint-1

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.

breakpoint-2

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.

GUI Method

exception-review-mqs

Microthemer suggests 4 media queries by default when you first install it.

  1. Large Desktop: @media (min-width: 1200px)
  2. Desktop & Tablet: @media (min-width: 768px) and (max-width: 979px)
  3. Tablet & Phone: @media (max-width: 767px)
  4. Phone: @media (max-width: 480px)

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.

exception-customize-mqs

To align your media queries with the 2 breakpoints I flagged:

  1. Click the  Edit media queries icon to the left of the All Devices tab, under the MT logo.
  2. Delete the Large Desktop media query using it’s  bin icon on the right. You may have to scroll down a bit.
  3. Adjust the Desktop & Tablet media query. Remove the min-width part of the media query code leaving only the max-width condition: @media (max-width: 979px)
  4. FYI, defining a range between min and max width is useful when you want to apply styles to a tablet, but not smaller devices like mobile phones. In this case, the top grey bar should be eliminated on phones as well as tablets though.
  5. Adjust the max-width value in the Tablet & Phone media query from 767px to 741px resulting in: @media (max-width: 741px). So the styles needed to fix the search form will be applied just before the layout break happens. This level of precision isn’t really necessary. It’s generally fine to implement media queries a bit before the actual breakpoint (e.g. leave it at 767px).
  6. Leave the Phone media query alone.
  7. Click the UPDATE MEDIA QUERIES button to save your settings.
  8. There will be just four tabs for applying styles now: All Devices, Desktop & Tablet, Tablet & Phone, and Phone.

new-desktop-tablet-scope

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.

Code Method

code-mq-shells

Start a new line at the very bottom of the code area and type the following code:

/* Desktop & Tablet */
@media (max-width: 979px) {
    
}
/* Tablet & Phone */
@media (max-width: 741px) {
    
}

Some points to note:

  • The media query code is an empty wrapper in preparation for normal CSS selectors and styles that can be entered in between the curly braces {}.
  • This example introduces CSS comments for the first time – text that starts with /* and ends with */. CSS comments are purely for your reference.
  • The Desktop & Tablet media query corresponds to the grey bar breakpoint.
  • The Tablet & Phone media query corresponds to the search form breakpoint.

Add Screen-Specific Styles To Fix Breakpoints

GUI Method

Fix Breakpoint 1: Grey Bar

wrapper-grey-breakpoint-fix

  1. Click the  folder icon at the top left to expand the folders and selectors menu.
  2. Expand the  Body folder.
  3. Go to the  Wrapper selector you created.
  4. Go to the Desktop & Tablet tab if you’re not on it already.
  5. Go to the  Padding & Margin property group.
  6. Notice that the current margin-top value is 20px.
  7. Set the  margin-top value to 0.
  8. The grey bar will disappear. Breakpoint fixed.

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.

sidebar-breakpoint-fix

  1. Open the  Sidebar folder in the folders and selectors menu.
  2. Go to the  Sidebar selector.
  3. Click the Tablet & Phone tab if you’re not on it already.
  4. Recall that the Fluid Content section of this tutorial explained how Twenty Ten achieves its layout by floating the sidebar to the right.
  5. Go to the  Position property group.
  6. Set  float to none.
  7. Set clear to left.
  8. The sidebar will jump down beneath the main content. Setting clear to left is necessary to ensure that the sidebar follows the main content rather than overlapping it.
  9. You previously set the width of the sidebar to 23.4% on the All Devices tab to make it fluid. You need to override this value.
  10. Staying on the Tablet & Phone tab, go to the Dimensions property group.
  11. Set the  width to 100%. This will override the 23.4% value you set on the All Devices tab.
  12. Microthemer writes media query styles to its stylesheet after the All Devices tab styles. In CSS, the last style rule in the stylesheet wins if the CSS specificity is equal. Specificity determines which CSS style should override another when two or more compete. See the educational note on CSS specificity and inheritance below to learn the rules.
  13. The sidebar will now fill the width of the page. But you will notice that the main content doesn’t yet because it has a margin-right value of 30% to accommodate the now non-existent sidebar.
  14. Open the  Content folder.
  15. Go to the  Content selector.
  16. Go to the  Padding & Margin property group.
  17. Set the  margin-right value to 0.
  18. The main content will now fill the width of the screen, which completes the switch to a single column layout.

Code Method

Fix Breakpoint 1: Remove Grey Bar

code-wrapper-grey-breakpoint-fix

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:

/* Desktop & Tablet */
@media (max-width: 979px) {
    #wrapper {
        margin-top:0;
    }
}

Some points to note:

  • When there is no longer any visible grey area on either side of the #wrapper div, at the 979px mark, the top grey bar will also disappear.

Fix Breakpoint 2: Single Column Layout

code-sidebar-breakpoint-fix

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:

/* Tablet & Phone */
@media (max-width: 741px) {
    #content {
        margin-right: 0;
    }
   #primary {
        width: 100%;
        float: none;
        clear: left;
    }
}

Some points to note:

  • You previously set a margin-right value of 30% on the #content element. The sidebar is absent in your new single column layout. And so you need to declare a new #content selector inside the media query with a margin-right value of 0 to make the content take up the full width of the page. This will override the 30% value because you’ve written it after the other #content selector. See the educational note on CSS specificity and inheritance below to understand the rules.
  • Twenty Ten uses the float property to float the sidebar (#primary) to the right of the content. Setting this to none moves the sidebar to the left. And setting clear to left ensures that the sidebar follows the main content rather than overlapping it.

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

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:

<a href="https://themeover.com/" id="site-link" class="home-link">Click me</a>

And here are 3 CSS selectors that set the text color of the link:

a {
    color: red;
}
a#site-link {
    color: blue;
}
a.home-link {
    color: green;
}

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.

a {
    color: red !important;
}
a#site-link {
    color: blue;
}

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.

Close