Move text and button of banner image on different positions for desktop and mobile

Topic summary

Goal: Reposition banner content (text/button) differently on desktop (left) and mobile (top) in a Shopify theme.

What was done:

  • Accessed Online Store > Themes > Edit code, then added CSS in Assets (base.css/style.css/theme.css).
  • Desktop: Set banner content padding-left to 0 for the left alignment using the banner content selectors.
  • Mobile: Within a max-width: 749px media query, set the banner box to position: absolute; top: 0; with a small padding-top to place it at the top.

Results and follow-ups:

  • Mobile positioning worked immediately.
  • Desktop shift was subtle at first; after refresh it moved left. User initially asked for “more left,” then decided the current position was sufficient.
  • Helper provided optional CSS to push further left (e.g., max-width: 100% and adjustable padding-left like 5rem) for fine‑tuning.

Notes:

  • Images were shared to illustrate before/after positions.
  • Code snippets and selectors are central to the solution.

Status: Resolved; user satisfied, with optional tweaks available if needed.

Summarized with AI on January 16. AI used: gpt-5.

Welcome. :blush:

1 Like