Using CSS Media Queries in WordPress Responsive Themes

CSS Media Queries in Wordpress Responsive Themes

Do you ever try to scrutinize that the ways used by your customers for viewing your website is continuously changing? Gone are the days when users view the websites on the bigger screens of desktops and laptops. Users are no longer interested in browsing the web through the PC or laptops only. The growing popularity of Smartphones and tablets have changed the perception of website display owing to their varied screen sizes, which has given birth to the need of developing responsive WordPress themes. It does not matter if you are using WordPress platform for your start-up business or established business, your website have to be responsive to cover the vast Smartphone and tablet users’ domain.

CSS media queries make it convenient to develop responsive WordPress themes. These queries allow the web designers to target style based on different properties of devices such as screen resolution, width and orientation.

What are CSS Media Queries and Their Benefits?

CSS media queries are used for altering the properties of the website according to the device’s specifications. The media queries go beyond the classical media types that have been in use since CSS 2.1, which helped our websites to obtain dome degree of responsiveness. Some benefits of media queries are listed as follows:

[list style=”1″ underline=”1″]

  • Media queries unwraps the gamut of prospects with “media” element that control the methods through which the styles will be applied.
  • It takes the previous scheme to the next level by letting us to target styles relying on different device properties like screen resolution, orientation, width, and others.
  • Media queries allow us to target not a single device but a range of different devices including Smartphones and tables, iPhone, iPad, Kindle fire etc.

[/list][margin_15b]

Four of The Best Resources for Twitter Bootstrap

How to Establish CSS Media Queries?

Media queries can be established by employing two components:

[list style=”1″ underline=”1″]

  • By setting the media type equals screen
  • By the actual query that is enclosed within parenthesis consisting of the media feature for scrutinizing and the target value.

[/list][margin_15b]

Blurry Full-size Navigation with jQuery and CSS3

The simplest form of media query is to have varied styles for screen.

[html]

<link href=”printstyle.css” type=”text/css” media=”print” rel=”stylesheet”/>

Top 10 Free jQuery Map Plugins You Can Use

<link href=”screenstyle.css” type=”text/css” media=”screen” rel=”stylesheet”/>

[/html]

The above code is used to have varied style sheets to be loaded depending on a screen device or a printer device. For print device, the printstyle.css will be loaded while for a screen device screenstyle.css will be loaded.

12 Best Wireframing Tools and Wireframe Apps

You can also add more conditional style sheets relying on other important parameters like width of the device.

[html]

<link href=”mobile.css” type=”text/css” media=”screen and (max-device-width: 480px)” rel=”stylesheet”/>

[/html]

The above written query will employ this style sheet only to a single device, which has browser horizontal resolution not more than 480 pixels else the link will not work. You can easily identify that the file name is mobile.css, which means the particular query is meant for mobile device styles.

Understanding Different Media Queries on Standard Devices

You can use a specific set of styles, which will be common for different screen sizes based on media query. Thereafter, you can employ the media queries to your website depending on the device’ specifications and you can also override styles that you want to be different for varied screen sizes.

Here is an example of a media query that hides the custom header picture in the Twenty Fourteen template for all the screen sizes, which are less than 800 pixels in size:

[css]

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

[/css]

The CSS inside the @media rule functions only for the tablet and mobile sized previews. However, it does not works with desktop sized previews since the width of desktop browser is larger than 800 pixels.

Some other examples:

In the first CSS example shown below, the overall container is restricted to a maximum of 955 pixels width while the sidebard and content areas will emerge side by side with percentage-based widths.

[css]

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

This will not look good on small screens and to create the container responsive according to the smaller screens, we have to set the width to maximum along with the content and sidebars areas also to 1005 width. It will not only make the theme adjustable to the smaller screen sizes but will also make the content and sidebars easily readable to the readers.

[css]

/*For browser/screen widths less than 768px*/

@media screen and (max-width: 768px) {
.container {
max-width: 100%;}
.content {
width: 100%;}
.sidebar {
width: 100%;}
}
[/css]

The latest themes in WordPress have inbuilt CSS media queries. Therefore you can use the preview buttons in the customizer to ensure that you do not split the designs for smaller screens.

How to Create Child Theme for WordPress Sit Using CSS Media?

Applying media queries in WordPress website help in adding responsiveness to its theme thus adding more chances of increased mobile traffic on it. For adding media queries to a WordPress site, you have to create a child theme and for doing so, you will make a new folder for saving the child theme in your WordPress installation like this:

Wp-content\themes\twentyfourteenchild

Note: In our case, we are using twentyfourteen WordPress theme, hence we will make the child theme named, “twentyfourteenchild”.

Make a file called style.css in the child theme directory. This is the single file needed to make a child theme. The style sheet must begin with the following lines:

[css]

/*
Theme Name: Twenty Fourteen Child
Theme URI: http://example.com/twenty-fourteen-child/
Description: Twenty Fourteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfourteen
Version: 1.0.0
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fourteen-child
*/

@import url(“../twentyfourteen/style.css”);

/* =Theme customization starts here
————————————————————– */
[/css]

You can modify each of the lines according to your choice of theme but the only lines, which cannot be changed, are Theme Name and the Template.

 Use of Meta Tag for Mobile Browsers with Larger Viewport

Some mobile browsers have larger viewport as compared to the actual width of the device site such as Safari and iPhone.  The viewport is bigger to adjust the desktop specific websites also properly on iPhones. However, when we are changing the styles for displaying the website according to different screen sizes, we must ensure that the browser keep the viewport same as the actual width of the device.

This can be achieved by adding the Meta tag given as follows:

[html]

<meta name=”viewport” content=”width=device-width” />

[/html]

Note: If your base theme does not have this Meta tag, you can create a copy of the base theme header.php in the folder of child theme for adding this tag. The addition of this tag is mandatory for proper functioning of media queries on your WordPress site.

Understanding Common Media Queries

Since Apple was the first to launch the smart phone and tablet products for the techno savvy generation, hence, most of the media queries rely on the sizes of these devices and those media queries are listed as follows:

[list style=”1″ underline=”1″]

  • For targeting landscape mode in Smartphones, use:@media (min-width: 321px) { … }
  • For targeting portrait mode in Smartphones, use:@media (max-width: 320px) { … }
  • For targeting landscape mode in iPads, use:@media (orientation: landscape) { … }
  • For targeting portrait mode in iPads, use:@media (orientation: portrait) { … }

[/list][margin_15b]

You might have observed use of the orientation media characteristic for the iPads while the use of width characteristic on the Apple iPhone. Why so? It is just because the iPhone does not support the orientation media characteristic. You must employ width to imitate these orientation breakpoints.

Final Note

In today’s ever changing and technologically dependent environment, it is essential to understand the consistently growing popularity of Smartphones and tablets as majority of internet users are accessing the websites through mobile internet only. Therefore, if you want to accomplish unconquerable success and leads to your WordPress website, then you must use media queries to ensure that your site is easily accessed from different devices. The CSS media queries also help in customizing your WordPress theme so that it can render effectively on devices of different screen sizes.