Solved

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

aljumarstore
Visitor
3 0 0

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.jpegCapture3.PNG

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

 

Help me on this matter to fix it.

 

Thanks

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
7726 1506 1514

This is an 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;
}

 

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 4 (4)

saim007
Shopify Partner
496 64 83

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

Saim | Shopify Partner Expert

Was I helpful?

Buy me a Coffee

🙂
Hire me   to unlock the full potential of your e-commerce store 🙂

aljumarstore
Visitor
3 0 0

Dan-From-Ryviu
Shopify Partner
7726 1506 1514

This is an 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;
}

 

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

aljumarstore
Visitor
3 0 0

Thank you so much brother.