How can I remove image crop from the Warehouse theme hero section?

Hello, i am trying to remove image crop from the warehouse theme hero. I want to retain section margins even when screen size is scaled to smaller screen sizes.

Can anyone help with this.

Ive tried cover → contain but that does not work.

@bknerd

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

Thank you!!

I just need the to look the same even when scaling to smaller screens.

https://abbyson1.myshopify.com/

@bknerd

can you please show me issue?

@bknerd

can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
.slideshow__slide-inner {background-size: contain;}

Awesome! that handles the scale but now i have a repeat. When i remove the repeat the margins etc are a mess.

Would i be able to add alignment (top) and min-height?

Or settings for each screen size?
https://gih1a6ty4c5cmwp5-55324541127.shopifypreview.com

@bknerd

yes, please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
.slideshow__slide-inner {background-repeat:no-repeat !important;}

Thank you Ketan that works. Is there a code i can enter to retain the position of the image, the dots and the value props below?

1 Like

@bknerd

yes, thanks for update if any issue let me know