white spaces above and below an embedded vimeo

Store Design

Topic summary

A user encountered unwanted white space appearing above and below embedded Vimeo videos on their Shopify store using the Debutify theme. The issue persisted regardless of whether fixed or responsive sizing was used.

Solutions Provided:

  • Two community members offered CSS code snippets to be added to the theme’s theme.scss.liquid file
  • One solution targeted specific padding and wrapper elements
  • Another used display: contents on the video wrapper
  • The original poster confirmed one solution successfully resolved their issue

Ongoing Issue:
A different user later reported that the same CSS fix didn’t work for their case, where white space appears inconsistently—only on some embedded videos but not others. This suggests the problem may be section-specific or require customized CSS targeting for different video instances.

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

Im using Debutify theme, and every time I embed a vimeo video to the home page it creates big white spaces above and below the video..

I’ve tried using Fixed size and responsive, and it creates the same white spaces.

1 Like
2

@Nograd

Please share your website URL and password if any. I will check and provide a solution here.

Thanks!

3

@Nograd

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

4

Hi, https://nogradisrael.com/

5

@Nograd

Thanks for it

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
#shopify-section-161350986014880d99 .text-center div {
    padding: 0 !important;
}
#shopify-section-161350986014880d99 .text-center div.video-wrapper {
    padding-bottom: 37.25% !important;
}
1 Like
6

@Nograd

Add code assets/theme.scss.liquid Or assets/timber.scss.liquid bottom of the file.

#shopify-section-161350986014880d99 .video-wrapper { display: contents;}

Hope this will work for you.

Thanks!

1 Like
7

yeah thank you mate! that solved it ?

8

Hi. I added this code to the bottom of my assets/theme.scss.liquid as stated to do, but it did not eliminate the white space above and below my embeded videos. The space is only added on a few of the videos but not all of them. Is there some other code that needs to be changed? Thank you!