desktop view resizing hero image

SmartLitter
Excursionist
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: https://smartlitterco.com/

Replies 2 (2)

zaczee
Globetrotter
848 46 42

 

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
Shopify Expert
3465 459 515

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