Button on Image with text overlay.

fyt
Tourist
6 0 3

Hi there, 

so I edited my code to be able to move the link button on the image with tex overlay. And It worked out on desktop. 

But on the mobile version both image and buttons don't get resized properly and they go out the screen. 

Any suggestion on how to fix the mobile version?

DesktopDesktop

Desktop

MobileMobile

Mobile

 

Thank in advance

KetanKumar
Shopify Partner
16899 1846 6318

@fyt 

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
fyt
Tourist
6 0 3

Hi @KetanKumar 

The url is https://fytwine.com

Thanks

0 Likes
KetanKumar
Shopify Partner
16899 1846 6318

@fyt 

Thanks for store details 

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__btn {bottom: -40px;}
}

 

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
fyt
Tourist
6 0 3

Hey @KetanKumar 

Thanks for you answer, on mobile version now the button is available. 

But the image still doesn't get resized properly. Here is a screenshot. 

IMG_6533.PNG

 

I would like the same layout of desktop version, with shop in the up right corner on the full image size. 

 

Best

 

KetanKumar
Shopify Partner
16899 1846 6318

@fyt 

if you have resize banner 

KetanKumar_0-1614343362546.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
fyt
Tourist
6 0 3

Hey @KetanKumar 

 

Great, I resized it, and moved the button further down, so it looks pretty now. 

Just wonder if there is any chance to change the background colour? 

It show to light grey spaces above and under the image, could I make them white?

IMG_6536.PNG

0 Likes
fyt
Tourist
6 0 3

Hey @KetanKumar 

so I changed layout. I tried with slideshow. 

Now I have a nice resize for the image. without that frame.

On desktop I can also move the button easily. 

So my question now is, can I move the button under the image only for the mobile version?

KetanKumar
Shopify Partner
16899 1846 6318

@fyt 

Thanks for confirm 

it can be done some custom code 

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
0 Likes