Padding

Store Design

Topic summary

A user seeks to reduce excessive vertical spacing in their slideshow section on a Shopify store (Farmherhands.com).

Problem Identified:

  • The slideshow section has too much padding/space before the footer
  • Multiple helpers diagnosed the issue as stemming from CSS height settings

Solutions Provided:

Option 1 (DaisyVo):

  • Navigate to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS
  • Add CSS code targeting .slideshow.banner-grid with min-height: unset !important

Option 2 (PageFly-Richard):

  • Identified min-height: 42rem in theme editor as the cause
  • Suggested adjusting height settings in theme setup, or adding CSS code in the theme.liquid file above the </body> tag

Option 3 (Rahul_dhiman):

  • Edit component-slideshow.css file directly (Online Store > Themes > Actions > Edit Code > Assets)
  • Add media query targeting .slideshow__text-wrapper .banner__content with padding: 1rem for screens 750px and wider

All solutions involve CSS modifications to reduce the section’s vertical dimensions.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

I want to reduce all this space which is in the slide section

This is the area I need to reduce
This is the area I need to reduce903×553 66.1 KB

before my footer. Any help would be appreciated!

2

Hi @FHH24

Please share with me your store URL so I can check and help you :heart:

Best,

Daisy

3

This is Richard from PageFly - Shopify Page Builder App

Hi @FHH24 I can help you, Please share the website url (password if any). So I can give the correct solution.

Best regards,

Richard | PageFly

4
5

What password do you need?

6

Hi @FHH24

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
div.slideshow.banner.grid {
    min-height: unset !important;
}

Here is the result: https://prnt.sc/U1cxJzV6DR81

I hope this helps

Best,

Daisy

7

Hi, No need password.

I found this css code. maybe in your theme editor it has min-height: 42rem set so it is quite high and causing space. Look in your setup to see if there is a place to set the height and fix it.

PageFlyRichard_0-1732069085697.png
PageFlyRichard_0-1732069085697.png3346×1858 764 KB

If you don’t find this setup please add code here in file theme.liquid and above tag to fix it:

Hope my solution will help you resolve the issue.

Thank you.

8

HEllo @FHH24
Go to online store ----> themes ----> actions ----> edit code ----> assets ---->comnponent-slideshow.css
add this code at the end of the file and save.

@media screen and (min-width: 750px) {
.slideshow__text-wrapper.banner__content {
padding: 1rem;
}
}

result

12.png
12.png1920×846 132 KB

If this was helpful, hit the like button and accept the solution.
Thanks