How can I customize my mobile view button with CSS?

Store Design
1

Can you help me with the custom css mobile view button?

Screen Shot 2023-03-08 at 8.51.36 PM.png
Screen Shot 2023-03-08 at 8.51.36 PM.png2596Ɨ1218 269 KB

2

Hi @marketingapt1b ,

This is Richard from PageFly - Landing page builder, Iā€™d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/theme.css->paste below code at the bottom of the file:

@media screen and (max-width: 749px) {
 #shopify-section-template--17873265492264__1653646142d6a7c886 .button {
    background-color: #94ab4f;
    border: 0px;
    color: #ffffff;
 }
}

I hope it would help you
Best regards,

Richard | PageFly

3

Hello, please see ss below:

Screen Shot 2023-03-08 at 9.38.33 PM.png
Screen Shot 2023-03-08 at 9.38.33 PM.png1636Ɨ1460 174 KB

4

Hi @marketingapt1b ,

You need to remove your code first. Because this css is working for all devices

PageFlyRichard_0-1678283582131.png
PageFlyRichard_0-1678283582131.png910Ɨ629 172 KB

I hope it would help you
Best regards,

Richard | PageFly

5

What do you mean? That code works only in that section.

6

Hi @marketingapt1b ,

This your active code for all devices (Desktop, laptop, mobile)

PageFlyRichard_0-1678337148605.png
PageFlyRichard_0-1678337148605.png881Ɨ592 176 KB

My code below works only on mobile:

@media screen and (max-width: 749px) {
 #shopify-section-template--17873265492264__1653646142d6a7c886 .button {
    background-color: #94ab4f;
    border: 0px;
    color: #ffffff;
 }
}

If you just want that custom css button on mobile then you can use my code.

Best regards,