How to Design Responsive Website Using Media Queries

CSS media queries allow you to apply different sets of CSS rules based on conditions like browser width or device type.

Most commonly, media queries are used to create a responsive design, where different CSS styling is applied to different screen sizes. This lets designers craft sites that are pleasant to use and easy to read – even on very small screens – without creating completely separate mobile websites or themes.

Newer themes are usually built with a responsive layout. That means they use media queries to make the site work well on every type of device, from small mobile screens to larger desktop monitors. In the past, a theme may have been made with a fixed or flexible layout. Learn more about the differences between responsive design and other theme layouts.

Basic Example

Here is an example of a media query that hides the custom header image in the Twenty Fourteen theme for screen sizes smaller than 800 pixels wide:

@media screen and (max-width: 800px) {     #site-header {         display: none;     } }

Newer themes on WordPress.com usually have media queries built in, so it's a good idea to use the preview buttons in the Customizer when adding CSS to make sure you don't inadvertently break the design for small screens.

The CSS inside the @media rule example above only works in the mobile- and tablet-sized previews. It doesn't apply to the desktop-sized preview because the desktop browser width is larger than 800px.

↑ Table of Contents ↑

More Examples

In the first CSS example below, the overall container is limited to a maximum of 955 pixels wide and the content and sidebar areas will appear side by side with percentage-based widths.

.container {     max-width: 955px; } .content {     width: 65%; } .sidebar {     width: 30%; }

On small screens, that won't look good because 955 pixels is wider than the device's width. To make the container responsive to smaller screens, we can set the maximum width to 100% and then force the content and sidebar areas to 100% widths. Doing this will make the container fit nicely on small mobile devices, while also making the content and sidebar areas easier to read.

/*For browser/screen widths less than 768px*/ @media screen and (max-width: 768px) {     .container {         max-width: 100%;     }     .content {         width: 100%;     }     .sidebar {         width: 100%;     } }

↑ Table of Contents ↑

Editing CSS

When adding CSS to responsive-width themes, make sure you view the different device width previews to see how any CSS you've added affects those views. You can use the preview buttons at the bottom of the Customizer screen.

You can also view the site directly, maximize your browser window, and then slowly narrow it to see how the element you wish to modify behaves as the window size changes.

Some themes may have only a few media queries and others may have many. You can look at a theme's existing CSS to see what @media rules are already in use. Those can be the starting point for making CSS adjustments that don't break the responsive layouts already defined by the theme.

To see what media queries are already being used in your theme, look at the bottom of the style panel in your browser's web inspector. If you need help finding the style panel, see the help page on how to find your theme's CSS.

↑ Table of Contents ↑

Links

• Media Queries for Standard Devices
  
• Responsive Design with CSS3 Media Queries

↑ Table of Contents ↑

Getting Help

Need CSS help? We can provide limited CSS support through live chat or email. Feel free to reach out and we'll let you know if we can help with your CSS request. Otherwise, we can help point you in the right direction!

How to Design Responsive Website Using Media Queries

Source: https://wordpress.com/support/custom-css-media-queries/

Share this post