How can I prevent my Debut Theme hero image from cropping on desktop?

Store Design
1

Hi,

How can I get the hero image to resize nicely without parts of the image getting cropped? It looks good on mobile currently, but on desktop, the image keeps getting cropped, and it does not look good.

https://www.wbseatery.com/pages/celebrate-even-in-march

Thank you!

2

@sparkery ,

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
.hero[style]{
    background-size: contain !important;
}

This will make the image not cut off, but it will also center it:

diego_ezfy_0-1646073114815.png
diego_ezfy_0-1646073114815.png1293×688 630 KB

Unfortunately that is the default behavior of the Debut theme’s hero/slideshows.

There are alternative sections that you can install on the Debut theme, like this one, that will allow to use your images with full width and also offer a few other features in terms of customizations.

Kind regards,
Diego

3

Hello @sparkery

Go to your theme > edit code> assets > theme.css and paste this code
.hero__inner {
display: initial !important ;
}