Image with text overlay won't resize for mobile - Booster

Solved
Rita013
Tourist
3 0 2

Hi All,

Is there someone who can help me with my image header with text overlay? It looks good on desktop but not on mobile view.

Thank you!

dmwwebartisan
Shopify Partner
6582 1536 2002

@Rita013 

Can you provide a screenshot of which section you are talking about?

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Rita013
Tourist
3 0 2

This part:

Rita013_0-1621218049105.png

 

dmwwebartisan
Shopify Partner
6582 1536 2002

@Rita013 

Thanks for the clarification. I will check and get back to you with the solution.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
dmwwebartisan
Shopify Partner
6582 1536 2002

This is an accepted solution.

@Rita013 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media only screen and (max-width:749px){
#shopify-section-1621229689af93d325 .image-bar--x-large .image-bar__content, #shopify-section-1621229689af93d325 .image-bar--x-large .image-bar__item {
    height: 220px;
}
}

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
0 Likes
Rita013
Tourist
3 0 2

Thank you so much. It worked, the only problem is there is a crop part on top and bottom of the image.

0 Likes