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

[Aaron33aaron]

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.

[Dan-From-Ryviu]

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;
}
}

[Aaron33aaron]

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.