How to change WooCommerce notice "info" background color on smaller screens?

Question

Okay so firstly I'm no expert coder (hence the question) but I've managed to change the WooCommerce info bar color for desktop viewing, but I cannot for the life of me figure out how to change the color for mobile devices.

This is what works for desktop viewing:

.woocommerce-info {
  background-color: #000;
}

And I tried multiple similar combinations of the below code with no success:

@media (min-width: 992px) {
  .woocommerce-info
  background-color: #000; !important
}

Answer 1

There are multiple mistakes in your attempt… Try the following for small screen devices (I have used a random color that you will replace with the right desired one):

/* For larger screens (first) */
.woocommerce-info {
    background-color: #000000 !important;
}

/* For smaller screens (after) */
@media screen and (max-width: 782px) {
    .woocommerce-info {
        background-color: #AA00B6 !important;
    }
}

Code goes in style.css file of your active child theme (or active theme).

Tested and works. You may try without !important, to see if it works...

On small screen devices, you will get something like:

On larger screen devices, you will get the default behavior like:

---

In some cases, you may insert those CSS rules after all existing ones using:

add_action('wp_head', 'wp_head_custom_css', 99999);
function wp_head_custom_css() {
    ?>
    <style>
    /* For larger screens (first) */
    .woocommerce-info {
        background-color: #000000 !important;
    }

    /* For smaller screens (after) */
    @media screen and (max-width: 782px) {
        .woocommerce-info {
            background-color: #AA00B6 !important;
        }
    }
    </style>
    <?php
}

Code goes in functions.php file of your active child theme (or active theme). Tested and works.