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

[luvthemama]

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

[made4Uo]

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

[luvthemama]

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

[Cedcommerce]

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 </body> 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 

[luvthemama]

Thank you so much. Unfortunately that did not work. 

[luvthemama]

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