Refresh Theme Banner image behavior

Topic summary

Issue: In the Refresh theme, the banner with “Zoom in on scroll” looks correct on desktop but appears pre‑zoomed on mobile. Setting image behavior to None displays correctly on both.

Suggestions and tests:

  • Disable the effect on mobile or switch the image’s object-fit from cover to contain.
  • Scope CSS to a single banner using its unique ID to avoid affecting all banners.
  • Apply a mobile-only CSS rule (via a max-width media query) to set object-fit: contain for that banner.

Results: Scoping worked, but object-fit: contain caused blank space above and below the image on mobile. Changing behavior to None removed the issue, suggesting the problem is tied to the zoom-on-scroll implementation on mobile rather than image size alone.

Open questions: Whether there is a theme-level fix to maintain zoom-on-scroll without mobile letterboxing or auto-zoom remains unresolved. Adjusting aspect ratio was considered but not confirmed as a solution.

Outcome: The poster decided to turn the image behavior to None as a practical workaround.

Status: Unresolved; workaround adopted. Code/CSS targeting and a media query were central to the discussion.

Summarized with AI on December 25. AI used: gpt-5.

Sure, let me know if you still need help. If I help you with my advice, just remember to mark it as a solution :wink: