New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Customizing media queries with the Chrome Developer Tools

From: WordPress: Building Responsive Themes

Video: Customizing media queries with the Chrome Developer Tools

In the previous movie we made a small change to the style sheet of the theme to make the frame responsive, and we then added a breakpoint so that as the window gets smaller than the predefined original size, the layout changes to a smaller size overall. Now we need to add additional media queries to deal with the content once the window gets smaller than this breakpoint. If I reduce the width of this window even more, you'll see that the margins, these large areas above and to the side of the content, are starting to take up a proportionally large amount of space in the layout. And if I go to my original designs, you'll see that whereas on screens we have a lot of space and the margins, on the small screens we've very little margins.

Customizing media queries with the Chrome Developer Tools

In the previous movie we made a small change to the style sheet of the theme to make the frame responsive, and we then added a breakpoint so that as the window gets smaller than the predefined original size, the layout changes to a smaller size overall. Now we need to add additional media queries to deal with the content once the window gets smaller than this breakpoint. If I reduce the width of this window even more, you'll see that the margins, these large areas above and to the side of the content, are starting to take up a proportionally large amount of space in the layout. And if I go to my original designs, you'll see that whereas on screens we have a lot of space and the margins, on the small screens we've very little margins.

And that's simply because I want to create as much space as possible for the content. So what we need to do now is figure out what styles we need to address to change these margins to become smaller so we have more space for our content. The first thing I'm going to do is create another media query, because the first media query we made addresses all the content that's between 720 pixels and 1039 pixels wide. So what I'm going to do is create another media query for screens that addresses any screen that is below 720 pixels wide.

So I'll say max-width : 719 pixels. That way this query will kick in once we're below 720 pixels. I'll with an end bracket, and then we can add our new styles inside this query. Now we need to figure out what styles we're going to change. So I'll go back to my site and then use the Google Webmaster tools to select the elements I think we'll need to change. I'm looking at the pre-header, and I'm seeing that there's a lot of extra space here on the sides, so there's must be a margin set somewhere.

So I'll select it, and I can see that there's a margin there. And when I go down here to my tool, I see that the I pre-header padding is set to zero pixels for top and bottom and 50 pixels for left and right. So I need to change that. I'll go into media query, say #pre-header, and then I'll set it to #pre-header, and I'll set its padding to 0 pixels for top and bottom and 20 pixels for left and right.

Close my new style, save the stylesheet, reload the page, and now you see we have a 20-pixel padding instead. If I hover over the element, you see the green areas on the left and on the right, but you also see that this search box still floating in. So that means there's something else going on with the search box. So I'll select the search box this time and then move up to the highest containing element and here I find that it's set to right 50 pixels. So again, I'm going to grab the style, header-search, and then I'll change the value--in this case right : 50px-- so I'll change that to right : 20px, close my style, save the style sheet, reload the page, and now the search box also shifted in properly.

Before I finish with the pre-header, I want to see what happens if I make the screen even smaller. If I make the screen smaller, you'll see at some point the search bar covers the social links and the search word actually disappears altogether. So what I need to do now, before moving on, is reduce the overall width of the search bar. So I'll select the search bar again, and here I see #header-search #searchform input# and then a width of 275 pixels. So if I go in here and experiment and change it to 175, I see that it now seems to work much better.

So what I need to do is copy out the style, add it to by media query, save it, reload the page again, and now you see that as we scale up and down, the pre-header changes to fit the new layout. Using the same method, by looking out the elements with the Inspector and then figuring out what styles are causing these elements to shift in and out, you can now reformat the style code so that the entire page will fit with the design.

Instead of forcing you to watch me as I identify each individual style and then make changes to them in my style sheet, I've created a code snippets document you can use to copy out the necessary styles for this media query. You'll find it in the exercise file. It's called code_snippets. If you scroll down here to 04.05, you'll find the entire media query. It starts with @media and goes down to END max -width : 719px. Simply copy it and replace this media query we just created, save it, and when you now reload the page again, you'll see that now all the content aligns with a 20-pixel margin instead of the previous 50 pixel margin.

And as we scale the window up, the 50-pixel margin appears once the screen is big enough to handle it.

Show transcript

This video is part of

Image for WordPress: Building Responsive Themes
WordPress: Building Responsive Themes

39 video lessons · 16665 viewers

Morten Rand-Hendriksen
Author

 
Expand all | Collapse all
  1. 4m 5s
    1. Welcome
      1m 4s
    2. Using the exercise files
      1m 27s
    3. What you should know before watching this course
      1m 34s
  2. 8m 36s
    1. What is responsive design?
      4m 16s
    2. The different faces of WordPress on mobile
      1m 55s
    3. Exploring the finished Anaximander theme
      2m 25s
  3. 9m 38s
    1. Getting and installing the Anaximander theme
      1m 53s
    2. Configuring basic theme options
      7m 45s
  4. 23m 51s
    1. Deciding what screen sizes to design for
      4m 11s
    2. Thinking responsively: Designing for many different screen sizes
      6m 23s
    3. Visualizing content realignment for better markup
      4m 35s
    4. Designing menus
      4m 52s
    5. Adding responsive images and videos
      3m 50s
  5. 26m 8s
    1. What are media queries and how do they work?
      4m 18s
    2. Exploring CSS3, progressive enhancement, and graceful degradation
      3m 27s
    3. Understanding best practices for media queries
      3m 57s
    4. Creating a responsive frame
      5m 12s
    5. Customizing media queries with the Chrome Developer Tools
      5m 28s
    6. Taking device width into account
      3m 46s
  6. 11m 1s
    1. Resizing the site title and the description
      8m 22s
    2. Adding media queries to the header
      2m 39s
  7. 11m 22s
    1. Making the menu responsive
      3m 35s
    2. Creating a different menu design for small screens
      7m 47s
  8. 19m 22s
    1. Making a responsive single-post layout
      6m 11s
    2. Making images responsive
      4m 37s
    3. Making videos responsive by including FitVids
      8m 34s
  9. 7m 45s
    1. Making the sidebar responsive
      5m 10s
    2. Hiding sidebars on mobile
      2m 35s
  10. 7m 28s
    1. Dealing with footer widgets
      5m 11s
    2. Adding navigation links that return to the top of the page
      2m 17s
  11. 12m 54s
    1. Using FlexSlider to create a responsive slider
      6m 2s
    2. Creating a loop to show sticky posts in a featured slider
      6m 52s
  12. 24m 37s
    1. What is jQuery Masonry?
      3m 41s
    2. Installing jQuery Masonry
      4m 45s
    3. Configuring the index page with Masonry
      7m 0s
    4. Using CSS to finalize the Masonry layout
      6m 17s
    5. Adding media queries to the Masonry index
      2m 54s
  13. 9m 11s
    1. Exploring hidden features of the Anaximander theme
      5m 51s
    2. Where to go from here
      3m 20s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.