How to reduce the empty space from the homepage video section

Store Design
,
1

Look on Ruffy.nl - There is a big green block with a dog video in it. There is too much space at the bottom section. How do I reduce the padding of this area? It is only letting me add custom CSS or edit the code but I can’t figure it out.

2

Hello @WebTec123 ,

I hope you are doing well!

Please copy and paste the below code by going to Online store >> Themes >> Edit code and search for base.css or theme.css and paste it.

#shopify-section-template–25043337937163__home_video_yHCjMA .hero-video, #shopify-section-template–25043337937163__home_video_yHCjMA .homepage-video, #shopify-section-template–25043337937163__home_video_yHCjMA video {
width: fit-content;
height: 100%;

}

If you stuck somewhere, feel free to let me know.

3

Hey @WebTec123,
In order to reduce the spacing between the video and bottom end point of the Home page hero section Image with video you need to follow these steps.
Go to Shopify Admin >> Online Store >> themes >> Edit Code >> styles.css
In the end of Styles.css you need to paste the below provided code.

.home-video .home-video-wrapper {
  padding: 25px 25px 10px 25px !important;
}

Results:
Now it has same padding from top and bottom.

image
image1918×572 62.6 KB

If this was helpful mark as Solution and like it.
Thanks

4

I checked in the section for base.css or theme.css but can’t fidn it.

5

By any chance can you check for styles.css
Thanks

6

I have styles.css but it says I can’t paste the code because its read only.

7

Please go to Online store >> Themes >> Customize >> Click on settings icon and scroll to the bottom where you will find custom css tab >> Paste the CSS

8

i added it but it didn’t change the padding

9

Can you please share your Store collab code in the p/m so that I can take a look and put the coding in the better way.
Thanks

10

I can’t find collab but I have this CSS code installed now: .hero-video,
.homepage-video,
video {
height: 75% !important;
}
Can’t I add something to this CSS code to adjust so I have less empty space below this?

image
image1887×879 83.9 KB

11

Hi @WebTec123,

Please go to Actions > Edit code > Assets > home-video.css file and paste this at the bottom of the file:

.home-video .home-video-wrapper {
    padding-bottom: 0px;
}

If I helped you, then a Like would be truly appreciated.

12

Hi @WebTec123

  1. From your Shopify Admin, navigate to Online Store > Themes > Edit Code
  2. In the Assets folder, open base.css and add your CSS code at the end
.home-video .home-video-wrapper {
    gap: 0;
    padding-bottom: 0;
}

image
image1361×580 73.1 KB

13

Even though this theme would not autoupdate anyway, you do not need to edit its code.
First, you already has some code in this sections “Custom CSS” in Customze.

There should be this code:

.homepage-video,
video {
  height: 95% !important;
}

Make it

.homepage-video,
video {
  height: 100%;
}
.home-video-wrapper.grid {
  row-gap: 0;
}

It will result in

Screenshot 2025-09-13 at 12.47.44 PM
Screenshot 2025-09-13 at 12.47.44 PM1355×645 484 KB

if my post is helpful, please like it ♡ and mark as a solution -- this will help others find it
14

The solutions I provided will work perfectly.

I would only recommend using an app to store your CSS codes more organized, such as:

Easy Custom CSS - Add custom CSS code to any available theme on your… | Shopify App Store

This will help you organize the CSS code you use in your store.

The CSS code you can use is as follows:

/* DELETE PADDING AND MARGIN FOR VIDEO SECTION */
div .home-video-wrapper.grid {
    padding:0px;
    align-items: center;
    row-gap: 0px;
    padding: 0px 15px;
}