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

[aljumarstore]

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;
}
}

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

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

Help me on this matter to fix it.

Thanks

[saim007]

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

[aljumarstore]

Store URL:

https://aljumarstore.com/

[Dan-From-Ryviu · Accepted solution]

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;
}

[aljumarstore]

Thank you so much brother.