Button on Image with text overlay.

[fyt]

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?

Desktop

Desktop

Mobile

Mobile

Thank in advance

[KetanKumar]

@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.

[fyt]

Hi @KetanKumar 

The url is https://fytwine.com

Thanks

[KetanKumar]

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

[fyt]

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. 

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

Best

[KetanKumar]

@fyt 

if you have resize banner 

[fyt]

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?

[fyt]

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]

@fyt 

Thanks for confirm 

it can be done some custom code