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 523

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 or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development