Image with text overlay for mobile site not resizing

[DrmzLB34]

Hello!

I have been trying to do some research on here and have tried various codes I found with others having a similar problem, but it just doesn't work for me..

I paste under the asset theme.css but still no change.

I have two image with text overlay by the top and the bottom before the footer...

Kindly help... Thank you!

mobiledesktop

https://theblossomeddreams.com/

[Michael_Pink · Accepted solution]

Hi @DrmzLB34 
You can try follow this path:
Themes => edit code => asset => theme.css.liquid
and add this code to bottom of the file theme.css.liquid

@media(max-width: 749px){
#Hero-hero-1 {
height: 48vw!important;
}
}

[DrmzLB34]

yay! so the top image is fixed, could you please help with the bottom one as well???? Thank you sooooo much!!

[Michael_Pink]

You can replace the code above with this:

@media(max-width: 749px){
#Hero-hero-1,
#Hero-hero-2 {
height: 48vw!important;
}
}

[FKsr]

Hi,

I have the same issues and tried many different codes, buy i guess it has to match the website.

Could some one please help me het my image with tex overlay to fit a mobile device.

Thanks!

https://achedaway-europe.myshopify.com

PW: Welcome2021!