Changes in theme.css.liquid not reflecting on mobile

Technical Q&A
1

Hello,

I have been making changes to my website, however anything that I do in theme.css only changes on desktop and not mobile…

my website (streamline theme): https://yuggen.org/collections/all-products/products/yuggen-reusable-silicone-ziplock-bag-small-size

For example, change the color of “add to cart” button, which only changed on the desktop… same happened when I reduced padding of the alternative section. It only works on the desktop view.

code pasted in theme.css.liquid:

button.btn.btn–tertiary.btn–full.add-to-cart {
color: white;
background-color: #591010;
border: none;
}
button.shopify-payment-button__button.shopify-payment-button__button–unbranded._2ogcW-Q9I-rgsSkNbRiJzA._2EiMjnumZ6FVtlC7RViKtj._2-dUletcCZ2ZL1aaH0GXxT {
background: #3E4430 ;
color: white;
}

What could be the reason? Thank you

1 Like
2

Hello There,

  1. In your Shopify Admin go-to online store > themes > actions > edit code
  2. Find Asset >theme.css and paste this at the bottom of the file:
button.btn.btn--tertiary.btn--full.add-to-cart {
color: white;
background-color: #668913!important;
border: none;
}
button.shopify-payment-button__button.shopify-payment-button__button--unbranded._2ogcW-Q9I-rgsSkNbRiJzA._2EiMjnumZ6FVtlC7RViKtj._2-dUletcCZ2ZL1aaH0GXxT {
background: #3E4430!important;
color: white;
}

Desktop Screenshot:- https://prnt.sc/48WChLu3X9x_
Mobile Screenshot:- https://prnt.sc/nBhzMBf-qx51

3

Hello There,

  1. In your Shopify Admin go-to online store > themes > actions > edit code
  2. Find Asset >theme.css and paste this at the bottom of the file:
@media only screen and (max-width: 750px){
button.btn.btn--tertiary.btn--full.add-to-cart {
color: white;
background-color: #591010;
border: none;
}
}

Screenshot:-Screenshot by Lightshot

4

Hi @nvg ,

I checked and your code is included inside ‘@media only screen and (min-width: 750px) {’ so when you add new code it will only work on desktop and tablet, not mobile.

If you want it to work for all devices, please remove this:

Screenshot.png
Screenshot.png1201×773 35.5 KB

Hope it helps!

1 Like
5

It worked like a charm, thank you so much! I spent so much time trying to figure it out before. Really appreciate your help :slightly_smiling_face:

1 Like
6

Hi @nvg ,

If you have any further questions, you can contact me.
Happy to help you.

7

After using this code, all my work in my base.css was destroyed. I was unable to revert back, and now my mobile version of my site is completely ruined! To anyone reading this, please do not delete this line of code in your css.