Second attempt: How to get images to adjust on all screens - Origin theme

Technical Q&A
, ,

Topic summary

A Shopify store owner using the Origin theme is struggling to make images display properly across different screen sizes (desktop, tablet, mobile). This is their second attempt seeking help after receiving no response to an initial April 2023 post.

Solutions Proposed:

  • Video tutorial approach: One responder suggested creating separate sections for desktop and mobile views, acknowledging that landscape vs. portrait orientations complicate universal image scaling. A YouTube tutorial link was provided.

  • CSS code solution: Another user recommended adding custom CSS to the theme.liquid file targeting banner media elements with properties like height: auto !important and display: block. The code aims to make banner images responsive.

Current Status:

The CSS solution did not resolve the issue. The original poster confirmed trying the code (including removing spaces between CSS symbols) without success, sharing a screenshot showing the problem persists. They indicated willingness to try the video tutorial approach next. The discussion remains open with no working solution yet implemented.

Summarized with AI on November 20. AI used: claude-sonnet-4-5-20250929.
3

Hello @luvthemama ,

To make images responsive on all the screens, you can simply follow the below steps.

  • Go to Shopify Admin Dashboard and click on Online Store → Themes.
  • Click on the Actions button → select Edit Code.
  • In the left-hand sidebar, navigate to the Layout folder and click to open the theme.liquid file.
  • Scroll to the bottom of the file and add the following code above the tag:

.banner {

display: block !important;

min-height: auto !important ;

}

.banner__media.media {

height: auto !important;

}

.banner__content {

display: none;

}

.banner__media.media img {

position: static !important;

height: auto !important;

}

Hope this helps; let us know if you have any questions.

Regards,

CedCommerce