Image with text overlay doesn't resize properly on mobile Solved

Highlighted
Tourist
9 0 1

Hi everyone, I am facing a similar problem as raised in this thread

https://community.shopify.com/c/Shopify-Design/Image-with-text-overlay-doesn-t-resize-properly-on-mo...

 

Ideally what I am trying to achieve is to have the picture responsive to the width, but not to crop off any of the image on mobile (web is fine at the moment).

 

Tried modifying and adding code but the image is still not responsive on the mobile app. Can anyone advise how to go about adjusting this?

 

My site is www.hattiehome.com and the pictures I see are as follows: screenshot_259.pngscreenshot_258.png

1 Like
Highlighted
Shopify Partner
1675 362 493

Hi

 

Please share your web shop password because  your web shop password protected.

 

Thanks!

 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Excursionist
14 0 2

I've also got this issue, except I was able to resize the image on mobile - but now the text and button are too large. Any ideas? 

 

mobile image.PNG

0 Likes
Shopify Partner
1675 362 493

Hi @Shaunmihikids 

 

please send front end password. i check your site first and after send perfect solution to you.

 

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
1 Like
Highlighted
Excursionist
14 0 2

Just emailed, thanks!


@dmwwebartisan wrote:

Hi

 

please send front end password. i check your site first and after send perfect solution to you.

 

Thanks!


 

1 Like
Highlighted
Tourist
9 0 1

Hi, the password is mahste

0 Likes
Highlighted
Shopify Partner
1675 362 493

Hi @shaunteo 

Try to add following css in your assets/theme.scss.liquid file

 

@media screen and (max-width: 749px){
.hero {display: inline-block;}
.hero__inner {padding: 25px 0;}
}

Hope this will work for you.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Shopify Partner
1675 362 493

Hi @Shaunmihikids 

Try to add following css in your assets/theme.scss.liquid file

 

@media only screen and (max-width: 749px){
h2, .h2 {font-size: 1.5625em !important;}
.hero__inner {padding: 15% 0 0 0 !important;}
}

Hope this will work for you.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
1 Like
Highlighted
Shopify Partner
1675 362 493

Hi  @Shaunmihikids 

 

Please do like and accept as solution. That will cost of our time :)

 

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
Shopify Partner
1675 362 493

Hi @shaunteo 

 

Please do like and accept as solution. That will cost of our time :)

 

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes