How do we decrease the button label size on Image with Text Overlay on Mobile - Debut Theme

Solved
Candacew
Tourist
6 0 2

Hi Shopify Community,

Our button label size is too large when we view it on mobile. The button label covers too much of our image. Please see pictures in mobile view below.

IMG_6117.PNG

IMG_6116.PNG

We would like the button label to be decreased on mobile. Please assist us with a code on how to do this. We are using Debut Theme.

 

Thank you so much in advance!

Hello Candacew,
Please share your site url.
So that I can check and let you know the exact solution here.

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
KetanKumar
Shopify Partner
17332 1871 6473

@Candacew 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Candacew
Tourist
6 0 2

Hello @oscprofessional ,

Thank you for your response. Our site url is https://daretobechic.com

 

 

0 Likes
Candacew
Tourist
6 0 2

Hello @KetanKumar  ,

Thank you for your response. Our site url is https://daretobechic.com

0 Likes
KetanKumar
Shopify Partner
17332 1871 6473

@Candacew 

yes, please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media only screen and (max-width: 749px) {
.hero__inner {
vertical-align: bottom;
    padding: 14px;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Candacew
Tourist
6 0 2

Hello @KetanKumar ,

We tried your code but it only made the button label bottom aligned, it did not decrease in size the way we want it to. Can you make it smaller so it's not so big covering our photo?

Thank you!

0 Likes
KetanKumar
Shopify Partner
17332 1871 6473

@Candacew 

this is fine?

KetanKumar_0-1619208819768.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Candacew
Tourist
6 0 2

@KetanKumar Yes that looks perfect! Thank you!

0 Likes
Candacew
Tourist
6 0 2

Can you send us the code please @KetanKumar 

Thank you!