Adding button in Default Products But Button Size not fixing in Desktop & Mobile

Store Design
, ,
1

Dear

Good day

I tried to add “Order on WhatsApp” button in my store. But there is some problem I am facing to adjust button size for desktop and mobile. If I set a width its showing different width in desktop and mobile. Check below code:

///////////////////////////////////////////////////////////////////////

@media only screen and (min-width: 750px) {
.btn–buy-on-whatsapp {
width: 360px;
display: block;
margin-top: 25px;
padding: 12px 30px;
font-size: 16px;
line-height: 1.5;
color: #fff;
background-color: #25d366;
border: 1px solid #4e4e4e;
border-radius: 100px;
text-align: center;
text-decoration: none;
text-transform: capitalize;
transition: all 0.3s ease;
}
.btn–buy-on-whatsapp:hover {
background-color: #fff;
color: #4e4e4e;
border-radius: 100px;
}
}
@media only screen and (max-width: 750px) {
.btn–buy-on-whatsapp {
width: 328px;
display: block;
margin-top: 25px;
padding: 12px 30px;
font-size: 16px;
line-height: 1.5;
color: #fff;
background-color: #25d366;
border: 1px solid #4e4e4e;
border-radius: 100px;
text-align: center;
text-decoration: none;
text-transform: capitalize;
transition: all 0.3s ease;
}
.btn–buy-on-whatsapp:hover {
background-color: #fff;
color: #4e4e4e;
border-radius: 100px;
}
}

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\

WhatsApp Image 2024-04-26 at 7.50.42 AM.jpeg
WhatsApp Image 2024-04-26 at 7.50.42 AM.jpeg1080×890 41.2 KB

Capture3.PNG
Capture3.PNG622×384 13.4 KB

Check the above images. The width not matching with other button.

Help me on this matter to fix it.

Thanks

2

Please share store url without url we can’t help you!

3

Store URL:

https://aljumarstore.com/

4

Hi @aljumarstore

You can solve it by updating your code to this version

.btn--buy-on-whatsapp {
width: 100%;
max-width: 44rem;
display: block;
display: block;
margin-top: 25px;
padding: 12px 30px;
font-size: 16px;
line-height: 1.5;
color: #fff;
background-color: #25d366;
border: 1px solid #4e4e4e;
border-radius: 100px;
text-align: center;
text-decoration: none;
text-transform: capitalize;
transition: all 0.3s ease;
}
.btn--buy-on-whatsapp:hover {
background-color: #fff;
color: #4e4e4e;
border-radius: 100px;
}
5

Thank you so much brother.