@media applying globally and not separately for each screen width [closed]

Your question is off-topic on here, but some quick tips.

To print your style, you can use wp_add_inline_style(). find a stylesheet and hook to it to print your styles, instead of using style link in a script link (which obviously won’t work). This is an example for you, which goes in your theme/child-theme’s functions.php file:

function add_my_inline_css(){
    wp_add_inline_style('HOOK','@media {body { color:black } }');
}
add_action('wp_enqueue_scripts','add_my_inline_css',999);

That’s the best practice to add inline CSS to your theme’s header. Change the HOOK to your theme’s stylesheet ID. You can find it in your theme’s header on any page. For example, if this is the style in your theme’s header:

<link id="kymadic-css" rel="stylesheet" type="text/css" href="https://example.com/wp-content/theme/my-theme/tyle.css">

Then your hook’s name is kymadic.
After using the above code, this will be added to your theme’s header:

<style>@media {body { color:black } }</style>

Now, a tip for responsive design. Media queries can be limited to a minimum and maximum width. The general syntax for a media query is like this:

@media only screen and (max-width: 1000px) and (min-width: 800px) { ... }

This will be activated when your screen’s size is above 800px wide but not greater than 1000px. You can remove one of the queries, for example:

@media only screen and (max-width: 1000px) { ... }

Will affect any screen smaller than 1000px, and this:

@media only screen and (min-width: 800px){ ... }

Will affect any screen larger than 800px wide. You can read more about responsive design at W3Schools.

Related Posts: