How to remove grey gap in slideshow padding on mobile view?

[pumbhirri_isha]

I’ve incorporated custom CSS code into the slideshow section on my homepage to properly adjust the image height for mobile viewing. However, that leaves a grey gap between the slideshow container and the image heights. I want to remove this grey gap and it should be a straightforward adjustment to resize the container but I’m having trouble pinpointing where to make this change. Should I be looking into the theme.liquid, or custom CSS, or slideshow.liquid?

Website: https://pumbhirri.com

Screenshot (mobile and desktop):

[PageFly-Richard]

Hi @pumbhirri_isha

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

In case you want to decrease the slideshow height you should decrease the whole slideshow container not the slide itself

Hope this can help you solve the issue

Best regards,

Richard | PageFly

[Team_OSC]

Hi @pumbhirri_isha

Follow these steps:

1. Open customization

2. Go to slideshow section

3. Select Custom CSS block

4. Paste this code

5. Save it and refresh the website.

#shopify-section-slideshow .slideshow__slide {
    height: 100%;
}

Hope this code will work.

If this work, Please like my solution and mark as accepted solution.

Best Regards

Team_OSC

[pumbhirri_isha]

Thanks Richard, that worked out well. Can I include a property in the same code to extend the slideshow to the top of my website, allowing the header or navigation to float atop the slideshow images?

[pumbhirri_isha]

Figured it out, thanks Richard.

[PageFly-Richard]

Glad to hear that, let me know if you have any questions