Desktop/mobile banner layout inconsistency in Shopify store

Store Design

Topic summary

A Shopify store banner section displays inconsistently across devices. On desktop, text and buttons overlap the background image, while mobile correctly stacks the image above the text. The desired behavior is for desktop to match mobile layout with no overlap.

Root cause: Likely CSS issues involving absolute positioning or flexbox conflicts in responsive styling.

Failed attempts:

  • Custom CSS using flex-direction: column
  • Overriding z-index and margin properties

Help requested:

  • Debugging theme-specific banner classes
  • Best practices for responsive banner sections in Shopify

A responder has asked for the store URL and password to investigate further. The issue remains unresolved and awaiting technical assistance.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Banner section of my Shopify store displays differently across devices:

  • Desktop: Text and buttons overlap the background image.
  • Mobile: Correctly stacks image first, followed by text.

Expected Behavior:
Desktop view should match mobile, with the banner image appearing above text (no overlap).

Technical Context:

  • Likely caused by absolute positioning or flexbox conflicts in responsive CSS.
  • Requires theme-specific adjustments to order, position, or media queries.

Attempted Fixes (Unsuccessful):

  1. Custom CSS to force stacking (flex-direction: column).
  2. Overriding z-index/margin properties.

Request for Help:
Seeking guidance on:

  1. Debugging theme-specific banner classes.
  2. Best practices for responsive banner sections in Shopify.
2

Hi @KashanAbbas , please share store url and password if it is password protected.