Media Queries

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.

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.

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:

/* 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.

Fix Breakpoint 1: Grey Bar

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

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 .
18. The main content will now fill the width of the screen, which completes the switch to 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:

/* 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

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.