Hi @samueljoonjung I see it look good
Topic summary
A user wants to display different banner images for desktop and mobile versions of their Shopify store. The current mobile banner looks good but appears too large on desktop.
Proposed Solutions:
-
PageFly-Richard suggested adding custom CSS code to
theme.liquidabove the</head>tag, though the specific code wasn’t fully visible in the conversation. -
oscprofessional recommended using the HTML
<picture>element with<source>tags to serve different images based on screen size:- Desktop image (≥769px width) via
<source>tag - Mobile image as fallback via
<img>tag
- Desktop image (≥769px width) via
Implementation Steps:
To locate the existing banner code:
- Right-click the banner and use browser “Inspect” to find the
<img>tag - Navigate to Online Store > Themes > Edit Code and check files like
sections/banner.liquid,hero.liquid, ortheme.liquid
The user requested clarification on finding and identifying the specific banner image code to replace. If the banner uses a CSS background image instead of an <img> tag, the CSS approach would need modification.
