Mobile Button large and Desktop button Small

krixizzle
Shopify Partner
10 0 2

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. 

Replies 2 (2)

Spac-es
Shopify Partner
300 89 114

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

 

 

 

 

 

 

 

 

 

 

 

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

 

 

krixizzle
Shopify Partner
10 0 2

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