Join Chaz Chumley for an in-depth discussion in this video Writing our first media query, part of Drupal: Responsive Design.
Now that we have a better understanding what media queries are, it's time to dive into writing our first media query. We'll begin by taking a look at the proper syntax for creating media queries, including the various ways to write media queries and the basic breakpoints for different devices. We'll also look at some tools for testing our media queries, discover some of the pitfalls of devices and how to overcome them with the use of the viewport meta tag on a way to creating a more responsive Drupal theme. Let's begin by opening up our editor and browsing to our Responsive Drupal theme folder.
Drupal/drupal.responsive/sites/all/themes/responsive that will take us to the theme folder we need, and from here what we want to do is go ahead and open up the layout.css file and scroll down to the bottom of the page so that's located in assets/css, and then layout. By scrolling down to the bottom of the page we're actually going to be entering our first breakpoints and our media query to be able to test for those different breakpoints as we review these in the browser.
The first breakpoint that I want to test for is the Tablet. I'm going to go ahead and start off by creating a CSS comment. This will provide the placeholder so that we can go back and find this media query later. The first thing I need to do is actually create the media query attribute or the media query syntax that we'll be using the test for the Tablet breakpoint. And that starts with @media followed by an open and close paren and then the max-width that I want to test for. So in this case the attribute of max-width of 768 pixels.
I'm going to go ahead and put curlicue brackets and at first this looks similar to writing a CSS rule, however, this media query attribute is actually going to be containing CSS rules, so it might be a little bit different than what you currently used to. What I actually want to do is create some sort of CSS rule that would allow me to number one, test this breakpoint, but number two visually actually display on the monitor that I have reached this breakpoint. We're kind of killing two birds with one stone. We're actually writing our first media query but we are also building in a testing mechanism on top of it.
In order to do this, we are going to actually create a body element and use the pseudo-class selector of before. Inside of here I'm actually going to use the content attribute, and I'm actually going to have a message be displayed whenever we reach this breakpoint. In this case, I will say Tablet media query (<768px) and then the word fired. To continue this rule we want to add a font-weight and make that bold. Next, we want to display it as block. We want to text-align to the center.
Next, we will actually want to go ahead and give us a background color. This will be an RGBA, and I want to give us actually a transparent yellow color. The values for this will be 255, 255, 0 and then for the alpha transparency 0.9. Next, I actually want to position this, and I want to absolutely position it to the top of 0, a left of 0, a right of 0 and then to deal with any z-indexing or any overlapping, I will actually want to go ahead and give this a z-index of 99.
Now that we have media rule written, let's go ahead and save this. Tab back over to our browser, refresh it, and then I'm going to go ahead and resize the browser until we reach that particular breakpoint. Great. So our media query has fired. It's giving me this notification at the top of the page, and we'll be utilizing this throughout the remaining media query discussion that we have so that we know when each media query is firing. Let's go ahead and open the browser, back up to the width that was at before.
We notice the media query now disappears because we're back to the browser style sheet that's being applied. Tab back over to our editor and then let's just copy this, paste it back in and then let's make the modification here to comment, we will call this Mobile. Then a mobile breakpoint I want is actually going to be 480 pixels. I am going to change my content here for the notification to say Mobile media query (<480px) fired. I'll leave the same color so this way we will actually see the message change. I'll save this.
Tab back over to the browser, refresh, and then begin resizing once more. We reached our Tablet media query, and now our Mobile media query. So now we're actually seeing the different breakpoints fired off, and we can utilize this now for writing additional CSS rules to hide content, to modify content, or to manipulate content in any manner that we want so that our page layout seems to becoming more responsive as we add these additional rules.
One other thing I want to discuss, and that is the meta-viewport. Have you ever browse to a website on your mobile device and notice that you had to double-click on the screen to enlarge it, or the web page that you are looking at had to be pinched or squeezed in order to be viewable? This is an example of a website that is not using what is known as the meta-viewport tag. If we go ahead and tab over to our browser and inspect the page with the Chrome developer tools, that's Command+Option+I and then focus in on the head section, we can see an example of the meta-viewport tag.
It's best to combine the Meta-viewport tag with media queries when considering responsive design. The meta-viewport tag sets the browser's layout viewport relative to the CSS it is displaying. This ensures that your site is set to the optimal width determined by the device. Media queries are a powerful new tool in our Responsive Design Toolbox and properly understanding how to use it makes all the difference. We looked at the importance of using the viewport meta tag for making sure our design responds accordingly in mobile devices and multiple ways to write media queries.
Often when you start writing media queries, you can become quickly lost in all the CSS. So next we'll discuss the workflow for ensuring our CSS is organized by breakpoints.
The course starts with setting up the Drupal environment in Acquia and defines some basic principles of responsive design before moving on to creating a new Drupal theme with fluid layouts, fluid media, and responsive tables and forms. Chaz also covers writing media queries, which allow you to create different style sheets for each device type.
The course wraps up with a look at Respond.js and content-aware image sizing in Drupal—responsive design tools that can optimize your project for maximum performance.
- What is responsive design?
- Understanding fixed-width vs. fluid layouts
- Working with fluid margins and padding
- Writing a media query
- Creating responsive menus and forms
- Adding min- and max-width support with Respond.js