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

15 0 6

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:

Replies 2 (2)

848 46 42




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

Shopify Expert
3477 462 524

Hi @SmartLitter ,

You can follow these steps:

view - 2024-02-19T173026.725.png

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:

view - 2024-02-19T173314.612.png

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .

B2B Solution & Custom Pricing | Product Labels by BSS

Need help from our expert? Kindly share your request with us via

BSS Commerce - Full-service eCommerce Agency