What Are Media Queries in WordPress?

Media queries in WordPress use CSS3 features to change the display of a website for different screens. They help websites show correctly on phones, tablets, and computers by changing styles based on device features.

Definition and Purpose

Media queries let you adjust CSS rules for different devices. They work by checking things like screen width, height, resolution, or orientation. Using them, you can control how your WordPress site looks and works on mobile devices, tablets, laptops, and desktops. Media queries are used to achieve responsive web design.

Syntax

A media query starts with @media, then lists a media type and one or more features.

Example:

@media screen and (max-width: 600px) {
  main {
    background-color: aquamarine;
  }
}

This CSS targets screens with a width of 600 pixels or less. When this condition is met, the background color of the <main> element changes to aquamarine.

Media Types

Media types are optional keywords that describe the device category to which the rules should apply. Common media types include:

all: all media devices
screen: typical screens (like phones and computers)
speech: screen readers
print: printers
tv: televisions

Setting a media type helps target specific devices or outputs.

Media Features

Media features define the conditions for applying a media query. Common features are:

max-width and min-width: set a screen width limit
max-height and min-height: set a screen height limit
orientation: checks if the device is in portrait or landscape
resolution: checks device resolution

You can combine these to control specific layout changes.

Logical Operators

You can join several conditions in one media query using logical operators.

and: All conditions must be met

Example:

@media screen and (min-width: 768px) and (max-width: 979px) {
  /* CSS here applies only between 768 and 979 pixels wide */
}

not: Excludes devices that match the next condition

Example:

@media not print {
  /* CSS applies to everything that is not print */
}

, (comma): Separates queries to make alternate sets

Example:

@media screen and (max-width: 700px), print {
  /* CSS applies to screens under 700px or any printed version */
}

How to Use Media Queries in WordPress

You can add media queries to your WordPress site in a few ways:

1. Customizer

From your WordPress dashboard, use the “Customize” menu. Go to “Additional CSS” and enter your media queries. Changes appear live, and you can update them anytime.

2. Theme Settings

Some WordPress themes offer a section in their settings where you can add extra CSS. Here, you can paste or write your media queries to change how your site looks on different devices.

3. FTP and CSS Files

Advanced users can access their site using FTP, then open the theme CSS file. You can write your media queries directly in the file and save changes. Always make sure to back up your CSS before editing.

Practical Examples

Example 1: Changing font size by device

@media screen and (max-width: 600px) {
  p {
    font-size: 18px;
  }
}

@media screen and (min-width: 601px) {
  p {
    font-size: 28px;
  }
}

This changes the size of text for small and large screens.

Example 2: Adjusting layout for tablets

@media screen and (min-width: 601px) and (max-width: 900px) {
  .sidebar {
    display: none;
  }
}

Removes a sidebar on devices with widths between 601 and 900 pixels.

Common Issues

Finding Breakpoints: Deciding the right width at which the layout should change can take testing and adjustment.
Cross-Browser Support: While most browsers support media queries, differences can appear. Test on all main browsers and devices.
Performance: Too many or overly complex media queries can slow down style processing. Keep queries simple.

History

Media queries have been part of CSS3 since 2012. They are a tool supported by the World Wide Web Consortium to enable responsive web design. The syntax and function have remained the same since their introduction.

Media queries help WordPress users and developers build sites that look good on any device, using plain CSS tools. Their use is part of most WordPress themes and is required for proper mobile display.

Media Query