What are media queries and how do they work? WordPress: Responsive Themes


show more What are media queries and how do they work? provides you with in-depth training on Web. Taught by Morten Rand-Hendriksen as part of the WordPress: Building Responsive Themes show less
please wait ...

What are media queries and how do they work?

At the heart of responsive design lies a specific type of CSS, or Cascading Style Sheets code, known as media queries. Media queries are conditional statements that tell the browser to use specific sets of styles depending on the size of the screen and other factors. Let's take a look at how simple media queries work and how to build them. What I am going to do here is add a simple media query to the style sheet of this theme. So, I'll go to where I have my theme stored inside my WordPress installation.

It's under the WordPress installation, under wp-content/themes/Anaximander. If I scroll down here, we have the style.css file. I am going to open this in my text editor, which is Notepad++. You can open it in any text editor; it doesn't really make any difference. What I am going to do here is add a simple media query all the way at the bottom of the document, and that media query is going to change the font-family on the entire site when the screen is smaller than a certa...

What are media queries and how do they work?
Video duration: 4m 18s 2h 55m Intermediate

Viewers:

What are media queries and how do they work? provides you with in-depth training on Web. Taught by Morten Rand-Hendriksen as part of the WordPress: Building Responsive Themes

Subject:
Web
Software:
WordPress
Author:
please wait ...