How can I reduce the height of a homepage section?

Store Design
1

Dear Shopify experts,

I would like to ask if there is a way how to decrease size (height) of my section in homepage.

Pic of section:

PetrMachacek_0-1642542433217.png
PetrMachacek_0-1642542433217.png1000×1000 133 KB

Web: www.doramu.cz

Thanks a lot for any advice.

Petr

1 Like
2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >theme.css and paste this at the bottom of the file:
.FeatureText--withImage .AspectRatio { max-height: 600px; margin:50px 0;}
.FeatureText--withImage .AspectRatio img{object-fit:cover}
1 Like
3

@PetrMachacek

Your banner is actually a Slideshow, therefore altering the height without changing the width is a bad idea. Doing it will always end up making the image look squished and mess up the section as a whole:

diego_ezfy_0-1642571066235.png
diego_ezfy_0-1642571066235.png1893×662 167 KB

If you wanna do it either way (image quality will be compromised), you can do it like this:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid or theme.css and paste this at the bottom of the file:
#shopify-section-slideshow{
    height: 450px !important;
}

.Slideshow--fullscreen .Slideshow__Carousel--withScrollButton{
    max-height: calc(450px - 35px) !important;
}

You can change the 450px to any height you wish.

Alternatively, for greater control without sacrificing quality, you can also add a slideshow section with customizable height like this.

It’s fully compatible with the Prestige theme that you’re using and you’d be able to choose between heights.

Kind regards,
Diego