Image not resizing for mobile - Forge theme

Store Design

Topic summary

Issue: The homepage banner around “Shop now, pay later” on lotusmassagechairs.com doesn’t resize/render correctly on mobile (Forge theme).

Proposed fixes (CSS-based):

  • Mobile-specific image: Add a media query to the theme’s CSS for small screens (@media max-width: 411px) targeting the section selector (.image-with-text-overlay-… .section-img-txt-overlay__bg-img) and set background-image to a mobile-optimized image URL. The responder can help retrieve the correct image URL.
  • Reposition existing image: Within the same media query and selector, keep the current image URL but set background-position: 100% 50% to show the right side of the banner where key info appears.

Notes:

  • @media (max-width: 411px) applies styles on smaller phones. background-position controls which part of the background image is visible. Code should be added to the theme’s style CSS file.

Status: Solutions provided; no confirmation of implementation or resolution yet. Images/URLs are central to the fix.

Summarized with AI on January 19. AI used: gpt-5.
1

Hello, there is a banner on the homepage of my site (www.lotusmassagechairs.com) around shop now, pay later. It is not rendering/resizing correctly on mobile. Anyon know how to fix this?

Thanks

2

Hi,

You can solve this in two methods,

First: make a new image for mobile view: and then add the following code into your theme style css file.

@media (max-width: 411px)

.image-with-text-overlay-template–16322873688249__164253557900d67a91 .section-img-txt-overlay__bg-img {background-image: url(//HERE ADD THE IMAGE URL); }

Let me know if you don’t know how to get the URL to help you with.

Second: you can shift the image to the left so it the text only appear by adding the follwoing code

@media (max-width: 411px)
.image-with-text-overlay-template–16322873688249__164253557900d67a91 .section-img-txt-overlay__bg-img {
background-image: url(//lotusmassagechairs.com/cdn/shop/files/Banner_Option_3.png?v=1628261192&width=420);

background-position: 100.0% 50.0%;

}

THIS WILL SHOW ONLY THE RIGHT SIDE OF THE IMAGE WHICH CONTAIN THE IMPROTANT INFO THAT YOU WANT USERS TO NOTICE

let me know if you need any further assistant have a nice day.