Product page 'Add to cart' button styling weird on mobile device only (Dawn theme 12.0)

Aaron33aaron
Visitor
2 0 1

My 'Add to Cart' button is styling weirdly on mobile while being fine on desktop. It looks as if the 'Add to cart' button is too close to the dynamic pay button below it and any styling I try to apply to it seems to be ignored on mobile only while appearing on desktop. 

 

In my base.css, I was doing some testing and added this code:

 

@media only screen and (max-width: 767px) {
.product-form__submit {
background: #000000 !important;
color: #ffffff !important;
margin-bottom: 30px !important;
     }
}

 

It affected the product page 'Add to cart' button on desktop but had no affect on the mobile version. I'll include a screenshot of what it looks like on mobile. If anyone has any ideas about what might be causing this or how to fix it, it would be greatly appreciated.

 

IMG_4894.PNG

 

 

 

Replies 2 (2)

Dan-From-Ryviu
Shopify Partner
7027 1330 1354

You can try to update code to this and check 

@media (max-width: 767px) {
.product-form__submit {
background: #000 !important;
color: #fff !important;
margin-bottom: 30px !important;
}
}

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

Aaron33aaron
Visitor
2 0 1

Hey Dan thanks for the reply, unfortunately that did not work. It's worth mentioning that even if I don't apply a media selector for mobile screens and apply general CSS for the 'Add to cart' button then it will not affect it in any way meaning for some reason the CSS is not being applied to mobile while it is being applied to desktop.

 

If anyone has any ideas it would be greatly appreciated.