How can I resize a hero image for desktop view without excessive scrolling?

[SmartLitter]

hey, does anyone know how to resize the hero image so it fills the landing page, but not to where i have to scroll a lot. on mobile view, it looks great, but pc view the image is just so big and it almost is in your face. does anyone know how to resize it down. link: https://smartlitterco.com/

[zaczee]

Hi,

We need to create separate image upload options for mobile and desktop. To create this we need to customize the slider.liquid code

[BSS-Commerce]

Hi @SmartLitter ,

You can follow these steps:

Find the base.css file:

- Add the following CSS code at the end of the file:

@media only screen and (min-width: 600px) {
  .media > *:not(.zoom):not(.deferred-media__poster-button):not(.media__badge):not(.media__text-content){
     height: 60% !important;
 }
}

Note: You can adjust "60%" down or up to achieve your desired size.

- Then press "Save" to save.

The result you will achieve: