CODEWITHSUNDEEP
csswordpresswoocommercemedia-queriesmobile-devices
Mark Bibby
Mark Bibby

Reputation: 11

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

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
}

Upvotes: 1

Views: 601

Answers (1)

LoicTheAztec
LoicTheAztec

Reputation: 253748

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:

enter image description here

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

enter image description here

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.

Upvotes: 0

Related Questions