Mobile banner index page, for Origin theme

Store Design
,

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.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
7

Hey @bug ,

Ah okay I see.

Yeah so most likely the class names are shared so the above CSS then applies to all elements containing that class name. The easiest and quickest option would be to find this header element from within your code base (it will be named banner-image so something along those lines) and then add a classname to it such as homepagebanner (see screenshot)

addclasslist.png
addclasslist.png1616×643 134 KB

The add the CSS as follows:

@media(max-width:600px){
.homepagebanner {
    height:600px;
}
.homepagebanner > img {
height:600px;
}
}

Essentially what we are doing here is targeting this element on it’s unique class name so it doesn’t affect any other elements.

If you can’t find the file, send a few screenshots of this section from within the Theme Customizer and from the code base and I can assist further. Thanks!

1 Like