John Davidson

Message:

i have been trying to implement all the best-practices across the board, and starting with media queries i have used the "media" parameter in "wp_enqueue_style".

function nm_child_theme_styles() {

            // Enqueue child theme styles

            wp_enqueue_style( 'nm-child-theme', get_stylesheet_directory_uri() . '/lawrence-dev-environment/client/dist/global.bundle.css' );

            

            // Checks if front page

            if ( is_front_page() ) {

                    wp_enqueue_style( 'nm-child-theme-front-page', get_stylesheet_directory_uri() . '/lawrence-dev-environment/client/dist/home.bundle.css' );

                    wp_enqueue_style( 'nm-child-theme-front-page-media', get_stylesheet_directory_uri() . '/lawrence-dev-environment/client/dist/responsive/main-only-screen-and-min-width-768-px.css', array(), "1.0", 'only screen and (min-width: 768px)' );

            }

            

}

add_action( 'wp_enqueue_scripts', 'nm_child_theme_styles', 100 ); // Note: Use priority "1000" to include the stylesheet after the parent theme stylesheets

There is just one problem, even though i included the "only screen and (min-width: 768px)", the style is loaded only for width above 768px, however in Chrome Dev Tools i can see on device width less than 768, it just shows as "unused bytes", so its bad on performance.

It does use it though at 768+, but i want it to ONLY be enqued when above 768, so mobile devices don't load unused code.

---

My Answer:
wp_enqueue_style function to properly enqueue my stylesheets in WordPress. However, when I check the sources/coverage tab in my browser's developer tools, I still see the media queries in the coverage report.

This is actually expected behavior. The coverage report in the developer tools shows which CSS rules are actually being used on the current page, not just which stylesheets are being loaded. So even if you enqueue your stylesheets properly using wp_enqueue_style, if the media queries are not being applied to any elements on the page, they will still show up in the coverage report as unused.

To ensure that your media queries are being applied correctly, you can use the inspect tool in your browser to check which styles are being applied to specific elements on the page. If you find that your media queries are not being applied as expected, you may need to double-check your CSS code to make sure they are written correctly and targeting the right elements.