How can I reduce the heigh of the slideshow on Homepage?

[kingdom2]

Hi there!

How can I reduce the heigh of the slideshow on Homepage?

I want to reduce like 30% of the existing height.

Theme: Refresh

Website: https://plenitudvital.es/

Thanks!

[BSSCommerce-B2B]

@kingdom2,

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head>

<style>
@media screen and (min-width: 750px) {
   #shopify-section-template--24084371472731__slideshow .slideshow__slide.grid__item {
     height: 70%;
   }
   #shopify-section-template--24084371472731__slideshow .slideshow.banner {
      min-height: unset;
   }
}
</style>

If it helps you, please like and mark it as the solution.

Best Regards 😊

[NovakNorth906]

@BSSCommerce-B2B Sorry but you should not use section IDs as css selectors. Those are not preserved between theme duplications. See my reply for correct way to accomplish this and apply css to only a specific section.

[DaisyVo]

Hi @kingdom2 

I hope this message finds you well.

To adjust the height of the slideshow on your homepage, please follow these steps:

Step 1: Go to Shopify Admin > Online Store > Theme > Edit Code

Step 2: Search for the theme.liquid file

Step 3: Insert the following code above </head>

<style>
@media screen and (min-width: 750px) {
.slideshow__text-wrapper.banner__content.banner__content--middle-left.page-width.banner--desktop-transparent.scroll-trigger.animate--slide-in {
    height: 70% !important;
}
.slideshow__media.banner__media.media {
    height: 70% !important;
}
}
</style>

Once done, you should see the updated slideshow height like this https://prnt.sc/QLC9lkyDw1FT 

I hope this helps! 😊

Best regards,

Daisy

[NovakNorth906]

@DaisyVo Sorry but with the implementation of the Custom CSS setting in the customizer, answers should be directed to use that feature. This is the easiest way for a non-technical Shopify merchant to handle custom CSS.

[NovakNorth906]

Hi @kingdom2 ! Here is what you'll need to do:

1. Open Shopify admin dashboard
2. Sales channel > online store
3. Select the theme you want and click Customize
4. On the left under Template > click Slideshow
5. At the top of the Slideshow setting make sure Slide height is set to small
   
6. Then scroll to the bottom of the section settings (same area as the Slide height setting) and click on Custom CSS
7. Copy and Paste the following into that area

@media screen and (min-width: 750px) {
  .banner--small:not(.banner--adapt) {
    min-height: 20em;
  }
  .slideshow__text {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}​

• Click Save

If I managed to help you then, don't forget to Like it and Mark it as the Solution!

Kind regards,

Mark