Solved

Changes in theme.css.liquid not reflecting on mobile

nvg
Tourist
10 0 4

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

Accepted Solution (1)

LitExtension
Shopify Partner
4860 1002 1135

This is an accepted solution.

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

Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

Replies 6 (6)

ZestardTech
Shopify Expert
5395 971 1293

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

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
ZestardTech
Shopify Expert
5395 971 1293

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:-https://prnt.sc/0gJd_Q1ZNaNG

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

LitExtension
Shopify Partner
4860 1002 1135

This is an accepted solution.

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

Hope it helps!

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
nvg
Tourist
10 0 4

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

LitExtension
Shopify Partner
4860 1002 1135

Hi @nvg,

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

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
risemarket
New Member
4 0 0

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.