List of Media Queries in WordPress

Using Media Queries in WordPress

Media queries are a powerful tool in web design that allow you to create responsive websites that adapt to different screen sizes and devices. In WordPress, you can easily implement media queries to customize the appearance of your website based on the user’s device.

Understanding Media Queries

Before diving into using media queries in WordPress, it’s important to understand how they work. Media queries are CSS rules that apply different styles based on the characteristics of the user’s device, such as screen size, resolution, and orientation. By using media queries, you can create a seamless user experience across different devices.

List of Media Queries in WordPress

Adding Media Queries to Your WordPress Theme

The easiest way to add media queries to your WordPress theme is by going to the WordPress dashboard and navigating to “Appearance” > “Customize”. Then, locate ‘Additional CSS’ option to open the CSS editor.

Within the CSS editor, you can add media queries using the “@media” rule. For example, if you want to apply different styles for devices with a maximum width of 768 pixels, you can use the following code:

@media (max-width: 768px) {
/* CSS styles for devices with a maximum width of 768 pixels */
}
CSS

Inside the media query, you can add any CSS styles that you want to apply to below the specified width of devices. This can include changes to font sizes, margins, padding, or even hiding certain elements.

Most used template of media query rules

This is the base template being used for all websites, using this you can add custom codes for all screen sizes. We have set rules for large screens, laptop Screens, iPads, tablets and mobile phone screens.

Common Media Query Ranges

There are several common media query ranges that developers frequently use to create responsive designs:

1. Small Screens: This range typically targets devices with a screen width of 320px to 480px. It is commonly used to apply styles that optimize the layout for mobile devices.

2. Medium Screens: This range usually targets devices with a screen width of 481px to 768px. It is often used to adjust the layout and styling for tablets and smaller laptops.

3. Large Screens: This range is typically used for devices with a screen width of 769px and above. It allows developers to apply styles that are suitable for desktop and larger screen sizes.

/* FOR LARGE SCREENS ONLY */
@media screen and (min-width: 769px) {
  .yourclass {
  /* insert css properties here */
  }
}

/* LAPTOP SCREEN - 1280 */
@media screen and (max-width: 1280px){ 
  .yourclass {
  /* insert css properties here */
  }
}

/* IPAD PRO SCREENS - 1024 */
@media screen and (max-width: 1024px){ 
  .yourclass {
  /* insert css properties here */
  }
}

/* TABLET SCREENS AND SMALLER - devices with a screen width of 481px to 768px */
@media screen and (max-width: 768px){
  .yourclass {
  /* insert css properties here */
  }
}


/* MOBILE SCREENS ONLY - devices with a screen width of 320px to 480px*/
@media screen and (max-width: 480px) {
  .yourclass {
  /* insert css properties here */
  }
}
CSS

Screen resolution specific media query rules

Screen resolution specific media query rules are a way to apply different styles or layouts to a webpage based on the user’s screen resolution. These rules are written in CSS and allow developers to create a responsive design that adapts to different screen sizes.

/* (1366x768) WXGA Display */
@media  screen and (max-width: 1366px) {
  .yourclass {
  /* insert css properties here */
  }
}
 
/* (1280x1024) SXGA Display */
@media  screen and (max-width: 1280px) {
  .yourclass {
  /* insert css properties here */
  }
}
 
/* (1440x900) WXGA+ Display */
@media  screen and (max-width: 1440px) {
  .yourclass {
  /* insert css properties here */
  }
}
 
/* (1680x1050) WSXGA+ Display */
@media  screen and (max-width: 1680px) {
  .yourclass {
  /* insert css properties here */
  }
}
 
/* (1920x1080) Full HD Display */
@media  screen and (max-width: 1920px) {
  .yourclass {
  /* insert css properties here */
  }
}
 
/* (1600x900) HD+ Display */
@media  screen and (max-width: 1600px) {
  .yourclass {
  /* insert css properties here */
  }
}
CSS

Media Query rules for a range of resolutions

These rules are used only when you want to show the design for a pre-defined range of screen sizes. These rules are helpful if you have complex designs.

/* (320x480) iPhone (Original, 3G, 3GS) */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .yourclass {
  /* insert css properties here */
  }
}
 
/* (320x480) Smartphone, Portrait */
@media only screen and (device-width: 320px) and (orientation: portrait) {
  .yourclass {
  /* insert css properties here */
  }
}
 
/* (320x480) Smartphone, Landscape */
@media only screen and (device-width: 480px) and (orientation: landscape) {
  .yourclass {
  /* insert css properties here */
  }
}
 
/* (480x800) Android */
@media only screen and (min-device-width: 480px) and (max-device-width: 800px) {
  .yourclass {
  /* insert css properties here */
  }
}
 
/* (640x960) iPhone 4 & 4S */
@media only screen and (min-device-width: 640px) and (max-device-width: 960px) {
  .yourclass {
  /* insert css properties here */
  }
}
 
/* (720x1280) Galaxy Nexus, WXGA */
@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) {
  .yourclass {
  /* insert css properties here */
  }
}
 
/* (720x1280) Galaxy Nexus, Landscape */
@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) and (orientation: landscape) {
  .yourclass {
  /* insert css properties here */
  }
}
 
/* (1024x768) iPad 1 & 2, XGA */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .yourclass {
  /* insert css properties here */
  }
}
 
/* (768x1024) iPad 1 & 2, Portrait */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .yourclass {
  /* insert css properties here */
  }
}
 
/* (1024x768) iPad 1 & 2, Landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
  .yourclass {
  /* insert css properties here */
  }
}
 
/* (2048x1536) iPad 3 */
@media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) {
  .yourclass {
  /* insert css properties here */
  }
}
 
/* (1280x720) Galaxy Note 2, WXGA */
@media only screen and (min-device-width: 720px) and (max-device-width: 1280px) {
  .yourclass {
  /* insert css properties here */
  }
}
CSS

Media Query rules based on browser orientation

Media queries offer the flexibility to adjust a webpage’s layout based on the browser’s orientation. This means you can apply distinct CSS rules tailored for landscape or portrait modes.

/* CSS will be applied if your device is in LANDSCAPE mode */
@media only screen and (orientation: landscape) {
.yourclass {
  /* insert css properties here */
  }
}

/* CSS will be applied if your device is in PORTRAIT mode */
@media only screen and (orientation: portrait) {
.yourclass {
  /* insert css properties here */
  }
}
CSS

Testing and Refining Your Media Queries

Once you’ve added media queries to your WordPress theme, it’s important to test your website on different devices to ensure that the styles are being applied correctly. You can use browser developer tools or online testing tools like BrowserStack to simulate different screen sizes and devices.

If you find that your media queries are not working as expected, you may need to adjust the CSS selectors or values within the media queries. It’s a process of trial and error, so don’t be afraid to experiment and refine your styles until you achieve the desired result.

By using media queries in WordPress, you can create a responsive website that provides an optimal user experience across devices. Whether your visitors are using a desktop computer, tablet, or smartphone, your website will adapt and look great on any screen size.

Leave a Reply

Your email address will not be published. Required fields are marked *