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

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
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 community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency