Apply changes of banner buttons desktop mode only and have separate values for mobile mode

Technical Q&A
1

Hello,

I have the following code that allows me to make changes to the button on the banner on the home page only. How do I change this code, so that it applies to desktop mode only and have separate padding values for mobile mode?

.banner__buttons .button {
  border: none;
  color: white;
  padding: 240.5px 165px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px; !important;
}

Thanks for any leads,

monomgroup

2

This is PageFly - Free Landing Page Builder. I would love to provide my recommendations for your store.

Regarding your concern to to apply changes of banner button and have the different value for mobile. You can follow my steps below to achieve it for different devices.

To style for desktop only:

@media (min-width: 1023px) {
.banner__buttons .button {
What you style here only for desktop
}
}

To style for mobile only:

@media (min-width: width:739px) ) {
.banner__buttons .button {
What you style here only for mobile
}
}

Hope this helps.

Best regards,

PageFly