Mobile Button large and Desktop button Small

Store Design
1

My current site has a very tiny desktop banner button but the mobile is huge. How can i edit. Also is there a way to have a differnt mobile and desktop banner? The one im using is fine for desktop but just incase for future.

2

Add this code in your base.css file:

@media (max-width: 599px) {
  a.button.button--primary {
    font-size: 13px !important;
    padding: 0px !important;
    min-height: 40px !important;
  }
}

Result:

6.PNG
6.PNG360×298 98.8 KB

To add a different image on mobile devices, you can include the following code in your base.css file.

@media (max-width: 599px) {
  .banner__media.media.scroll-trigger.animate--fade-in img {
    display: none !important;
  }
  .banner__media.media.scroll-trigger.animate--fade-in {
    /* Replace the image URL with the one you want */
    background-image: url(https://images.pexels.com/photos/1191710/pexels-photo-1191710.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1); 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
}

Result:

7.PNG
7.PNG358×293 104 KB

3

the first code snippet did not make the button smaller it stayed same size and is tiny on the actual web version and still large on the mobile

4

Just following back up on this if you have the bandwidth:)

5

I’m sorry it didn’t work out. From what I’ve seen, you came up with a pretty creative idea, implementing the button right into the image, awesome!