Great!, so there i should replace banner__media media for homepagebanner?
Topic summary
A user encountered an issue with a horizontal banner image on their mobile homepage (Origin theme). The 3:2 image displayed correctly on desktop but appeared small with excessive white space on mobile devices.
Solution Provided:
- Developer suggested adding custom CSS to the base.css file to set banner height to 600px on mobile screens using media queries
- Initial implementation worked but affected other page elements (cropped images in a “solid gold” presentation section)
Refinement Process:
- To target only the homepage banner, developer recommended adding a unique class name (“homepagebanner”) to the banner element in sections > image-banner.liquid (around line 56)
- Updated CSS would then target this specific class instead of all banner elements
- User initially struggled with proper HTML syntax when adding the class name, placing it outside the quotation marks
- Developer corrected the syntax error by showing the class should be added inside the existing class attribute quotes
Resolution:
Issue successfully resolved after proper class implementation. The mobile banner now fills the screen appropriately without affecting other page elements.