Archived topic
Button Change on Mobile Device
7 replies · Started by Rahul on January 6, 2022
Last night I was visiting my site on my mobile, but suddenly I noticed my "Product Button" doesn't work on the mobile device, but it's good on the Desktop. Recently I've removed the underline with CSS (I've another case on it) but I didn't see this problem before. Now, what thing should I do? Please check the screenshot.
I'll be waiting for your kind response, dear support team. Have a nice day!
Hi there,
The custom CSS that applies the color to your product buttons on Appearance > Customize > Additional CSS was added inside an @media rule for desktop.
You'll have move the custom CSS outside of the @media (min-width: 769px){ ... } if you wish to apply it on all viewports. :)
I've applied and it works but is broken on the Mobile device. Would you see what I've done wrong? See the image and I've added you in my site Dashboard.
Try adding this CSS:
@media (max-width: 480px){
.da-button-center {
margin: 0 auto;
}
.da-button-center .da-button-inner {
white-space: nowrap;
}
}
There are multiple @media sections, please insert it as I don't know much about coding. I've sent you the access with the last message.
Hi there,
We don't make edits to users sites especially a live site.
the CSS that Elvin provided you can add AFTER all the other CSS you have.
Thank you! I've added it, and it's looking good! You all are always helpful! Have a nice day!
Glad we could be of help!