Relocate Image Banner Text to a custom spot

Shopify Discussion

Topic summary

Goal: Move Image Banner text/button further left on desktop and reposition on mobile; also reduce heading size on mobile.

Context: Merchant shared store URL and a preview link for a duplicated theme. Reference images illustrated desired desktop and mobile placement.

Solution provided:

  • Desktop: CSS using a media query to absolutely position the banner content box (.banner__box) with top and left offsets (vh units) for precise left alignment.
  • Mobile: CSS media query to set .banner__box to position: absolute, adjust top offset, and use a transparent background for better placement.
  • Mobile text size: Additional CSS media query targeting the banner heading (.banner__heading) to reduce font-size via calc with rem, adjustable by the merchant.

Outcome: Merchant confirmed both the positioning and mobile font-size changes worked as desired.

Status: Resolved. No further issues or disagreements. Images were central to conveying the target placement.

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

Something like this?

Need to play around with the values etc.

@media screen and (min-width: 750px) {
    .banner--desktop-transparent .banner__box {
        position: absolute;
        top: 20vh;
        left: -20vh;
    }
}

@media screen and (max-width: 749px) {
    .banner:not(.banner--mobile-bottom):not(.email-signup-banner) .banner__box {
        background: transparent;
        top: 12vh;
        position: absolute;
    }
}