Add to Cart Button Style Not Applying on Desktop

[Mab5]

Can someone please guide me? I changed the "Add to Cart" button color using the following code:

.product-form__submit {
background: #9db396 !important;
color: #ffffff !important;
font-weight: bold;

}

I added this code at the end of the base.css file. Initially, it worked perfectly, but after a few days, it suddenly stopped applying on the laptop screen — although it still works fine on mobile.

I can see the updated styling on mobile, but not on the laptop.

I also tried changing the button color from the theme settings, but that doesn’t seem to affect this button either.

Can anyone help me understand why this is happening and how I can fix it?

Can you please help me how can i resolve this isuue?

[websensepro]

Hello @Mab5 ,

kindly provide your store URL please and if it is password protected, please share the password as well.

Thanks!

[Mab5]

Thanks for getting back to me. Here’s the website URL: https://amsonsdesign.au/.
It seems that none of the custom CSS is working on the laptop — not just the Add to Cart button.

[BiDeal-Discount]

Hi @Mab5 

I guess we have some other style overriden this.

To resolve this issue, let share me your store url & password (if applicable) to let me check why & give you the solution

[Mab5]

Thanks for getting back to me. Here’s the website URL: https://amsonsdesign.au/.
It seems that none of the custom CSS is working on the laptop — not just the Add to Cart button.

[topnewyork · Accepted solution]

Hi @Mab5,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media screen and (min-width: 768px) {
.product-form__submit,
button.product-form__submit {
  background: #9db396 !important;
  color: #ffffff !important;
  font-weight: bold !important;
 }
}

Thanks!

[BiDeal-Discount]

Hi @Mab5 

The main reason is your file base.css have wrong syntax so some of styling will be missing

https://amsonsdesign.au/cdn/shop/t/10/assets/base.css?v=116716085513132832661750773410

[Mab5]

Thanks for getting back to me. Can you please share the correct syntax?

[Mab5]

All the codes as working now. Thanks a lot. 

[Mab5]

All the code changes are working now, but something seems to be wrong with my home banner. Could you please take a look and help me fix it?

[topnewyork]

Hi @Mab5,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media screen and (min-width: 768px) {
.product-form__submit,
button.product-form__submit {
  background: #9db396 !important;
  color: #ffffff !important;
  font-weight: bold !important;
 }
}

Thanks!

[jakeclifford]

Hi @Mab5,

Below the current code please try the following 

@media screen and (min-width: 768px) {
  .product-form__submit {
    background: #9db396 !important;
    color: #ffffff !important;
    font-weight: bold !important;
  }
}

Also make sure the you hard refresh the page, to do this hold shift and click browser refresh.

Hope that helps,
Jake 

[tim]

Here is the final part of your assets/base.css -- I've reformatted it a bit to better show nesting.

You should be careful with curly braces and each opening brace must have a matching closing one.

Here we see that you have opening brace on the first line, but it has no closing one, meaning that your code for product form submit button is also inside this media query and apllies only on narrow screen.

Also, there is no closing brace for .card-wrapper .badge rule which makes it a bit weird.

Since all this code is a customization, you need to decide where to close these rules/

@media (max-width: 767px){

    .banner__media img {
        object-fit: contain !important;
    }

    .banner__media.media {
        height: 23rem !important;
    }

    #HeaderMenu-New Arrivals > span {
        color: #ff9900;
    }

    .product-form__submit {
        background: #9db396 !important;
        color: #ffffff !important;
    font-weight: bold;
    }

    .product__title > * {
        font-size: 20px !important;
    }

    .price__badge-sale {
        color: #23282f!important;
    }
    .card-wrapper .badge {
        color: #ffffff;

        .badge.price__badge-sale {
            background-color: #ffffff ;
        }