How To Fix Media Query Not Working In WordPress?

One of the components of responsive web design is CSS Media Query. WordPress developers use the media query technique to ensure a website functions optimally across all devices and screen sizes. If there is an issue with the functioning of this CSS technique, it could result in the ‘media query not working in WordPress’ error message.

Fixing the ‘media query not working in WordPress’ error is essential to ensure your website is accessible to all, irrespective of screen type and size. Below we have provided a few tips to fix the ‘media query not working in WordPress’ error. But, before that, here is a brief explanation of CSS media queries.

What Are CSS Media Queries?

As one of the features of CSS (Cascading Style Sheets), media queries enable developers to apply different sets of CSS rules based on set conditions. It helps them create varied design layouts based on the device type or size of the browser viewport. Media query is used in an individual .CSS file, or you can insert it within a web page’s HTML.

It is a W3C-recommended standard for responsive web design. Plus, it ensures the content rendered is adaptable to different conditions, such as screen resolutions, browser width, and device type.

Usage Of CSS Media Queries

Ensuring a user has an enhanced experience when browsing a website is one of the factors for improving a website’s ranking on the search result, and this is where CSS Media Query can help.

Media queries help customize the appearance of web pages across all devices, screen sizes, and resolutions. It provides specific instructions that tell the browser how to render web pages when viewed on mobile, desktop, or other devices.

By using the CSS media query, developers can create websites that are accessible and readable on all devices without having to create a separate mobile website.

Related: Difference Between A Mobile Site And A Responsive Site

Here is an example of a media query:

@media screen and (max-width: 480px)

{

header { height: 70px; }

article { font-size: 14px; }

img { max-width: 480px; }

}

Media Queries are used for:

• Applying conditional styles with the CSS @media and @import at-rules.

• Moving a sidebar below the site’s content when a page is viewed in portrait mode on a mobile device.

• Targeting specific media <style>, <source>, and other HTML elements with the media= attribute.

• Adjusting column width based on the device screen size.

• Changing layouts on mobile devices from a two-column layout to a single-column.

Media Queries Syntax

A media query consists of the following four elements. By understanding the syntax, you can use media queries correctly.

@media Rule

This element helps declare (specify) the intention of setting up a media query in CSS. Enter @media with no space in between.

Media Type 

Media type refers to the type of device for which the media query is used. It includes the following rules:

• All: Suitable for all devices, and in cases where the media type is not specified, ‘all’ is used. 
• Speech: This media type is applied (or intended for) screen readers.
• Print: If a page material or document is in the print preview mode, the ‘print’ media type is applied. This media type is used for printers.
• Screen: This CSS rule applies to screens – smartphones, desktops, tablets, and more. 

Media Features 

The media features element is used to add specific details. All media feature expressions are placed within brackets, such as a max-width of 400px (mobile devices). Here, the max-width media feature is used for mobile devices.

Other media features and their functions are as follows:

• Width: This refers to the viewport width.
• Max-width: Defines the ‘maximum-width’ of the browser window.
• Height: This refers to the viewport height.
• Max-height: Defines the ‘maximum-height’ of the browser window.
• Min-height: Defines the ‘minimum-height’ of the browser window.
• Orientation: This refers to the viewport orientation. (landscape or portrait mode).

Logical Operators

The logical operators help compose complex media queries and include the not, and, and only elements. One can also use commas to combine one or more media queries into a single rule.

• Not: If you are using the ‘not operator’, you need to specify a media type. Typically, the ‘not operator’ negates a media query.

• And: For combining two or more media features into a single media query, use the ‘and operator.’ This operator can also help join media types with media features.

• Only: The ‘only operator’ is essential for older browsers. It helps older browsers correctly interpret the media query, thereby preventing issues like the ‘media query not working in WordPress’ error. Also, specify the media type when using the ‘not operator.’

• , (Comma): This operator is used to combine multiple media queries into a single rule. When a comma is used to separate several queries, each query is handled separately. Plus, if the list of queries is true, the whole media query list remains true.

Tips To Fix Media Query Not Working In WordPress

A CSS media query can result in an error for several reasons. Sometimes the media query may work on a mobile device but not on a desktop. Sometimes it may not work on all devices. To check your site’s media query, use the browser’s developer tools and inspect your site’s CSS. Click the ‘Styles tab’ to see which style is applied to the element (syntax) in question.

Most times, the reason for the ‘media query not working in WordPress’ is quite common. As such, here are a few ways to fix this error.

Check For Inline CSS Declaration

If you have declared the CSS within the HTML document, it could cause the ‘media query not working in WordPress’ error. You can fix this by removing the ‘CSS declared inline’ from the HTML document.

Another way is to override this declaration with !important. For instance, to change the text color of the paragraphs to ‘gray’ on mobile devices, use the following lines of CSS.

@media screen and (max-width: 1024px){

  p{        

        color: gray;

    }

}

However, sometimes this may not work due to the inline style applied to the same element. In such cases, use the !important rule to override the inline style and fix the problem.

@media screen and (max-width: 1024px){

  p{        

        color: gray !important;

    }

}

Position Media Queries Correctly

Another reason for the ‘media query not working in WordPress’ error is the incorrect positioning of media queries. To fix this, add the media query at the end of the style sheet.

Since browsers read the style sheet from top to bottom, codes mentioned at the end of the style sheet can override the declarations made in the beginning (except when !important is used). In addition, for small queries, place the media queries before the large screen.

Check out this example

body {

background-color: black;

}

@media screen and (min-width: 480px) {

body {

background-color: blue;

}

}

@media screen and (min-width: 850px) {

body {

background-color: light blue;

text-align: center;

}

}

• In the first rule, the background color is ‘black’ if the screen is less than 480px.
• In the second media query, the background color is ‘blue’ if the screen is between 480 to 849px.
• Lastly, if the screen is 580px or more, the background color will be ‘light blue’ with center alignment.

Desktop vs Mobile

Once you have set a media query, it should work optimally on both the desktop and mobile. However, if there is an error on either of the two, use the following tips to resolve the issue.

Media Query Not Working On Desktop

If you have used the media feature ‘max-device-width’ instead of ‘max-width,’ it could result in the media query not working on the desktop error. Here, ‘max-width’ refers to the size of the device’s display area, while ‘max-device-width’ refers to the screen size of a device (mobile).

To fix this ‘media query not working on desktop’ error, change the media feature to ‘max-width.’ This specifies the browser display area, not the actual screen size of the device.

Media Query Not Working On Mobile Devices

Likewise, if you have not set the viewport and default zoom, it could lead to the issue of media queries not working on mobile devices. To fix this, simply add the following code to your site’s header. Ensure that these lines of code are added within the <head> </head> element.

<meta name="viewport" content="width=device-width, initial-scale=1"/>

Here, the ‘width’ is the viewport size, set to device-width. It instructs the browser to render the website to fit the screen naturally. Whereas the ‘initial-scale’ defines the zoom level.

Read: How To Avoid CSS @import To Improve Page Load Speed

Conclusion

Ensuring your website is accessible to all, irrespective of their device type is important. A responsive website design can help you generate traffic from different sources. With Google’s mobile-first indexing, it could also lead to faster indexing of web pages. Plus, it will provide an enhanced experience to users browsing your website on mobile devices, which could improve your site’s ranking.

Fixing the ‘media query not working in WordPress’ error is straightforward once you identify the reason. You could make the changes as required by following the tips mentioned above.

To avoid the ‘media query not working in WordPress’ error from occurring again, use plugins like Simple Custom CSS and WP Add Custom CSS to add a media query to your website.

Furthermore, if you can’t troubleshoot the ‘media query not working in WordPress’ error, get in touch with us. We are a WordPress agency that helps businesses fix common WordPress errors on their website without causing any downtime.