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

Technical Q&A
, ,
1

Hi again - I asked for help on April 28, 2023 and didn’t receive help so I’m trying again. I have also searched the community forums and have tried various codes mentioned and none have worked so far.

How do I get images to adjust on all screens using the Origin theme? Thank you in advance for your assistance.

Here is a preview of the store: https://4qazfyewljxbgawm-29118496907.shopifypreview.com

2

Hi @luvthemama

It is a little complicated when we try to adjust the same images in all devices since some device will need a landscape photo and others will be portrait. That is a reason I came up with the solution to have a different section on desktop and on mobile. Please follow the instructions in the video

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

4

Thank you so much. Unfortunately that did not work.

Screenshot (70).png
Screenshot (70).png1366×768 92.3 KB

5

I also went back and removed the spaces in between each { symbol and that didn’t affect the layout either.

6

Thank you! I’m going to give this a try.