remove video side paddings

Store Design
, ,

Topic summary

A user seeks help removing left and right padding from a video element and displaying it at its original aspect ratio, as the current implementation crops the top and bottom.

Three solutions were provided:

  1. BSS-TekLabs: Add custom CSS code in the theme.liquid file before the </head> tag

  2. Moeed: Insert code in theme.liquid above the </body> tag

  3. Made4uo-Ribe: Add CSS targeting the specific video section wrapper (section#shopify-section-template-...) to the theme’s main CSS file (main.css, base.css, style.css, or theme.css) with padding: 0;

All three responders included screenshots showing the expected result after applying their solutions. The issue remains unresolved as the original poster has not confirmed which solution worked or marked any as accepted.

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

Hi, can anyone help me to remove the video paddings on the sides (right left ) and also make the video in its original size? the top and bottom are cut :disappointed_face:

Daniel19901_0-1727367823047.png
Daniel19901_0-1727367823047.png1907×622 46.2 KB

https://brodeon.myshopify.com/

2 Likes
2
3
  • Here is the solution for you
  • Please follow these steps:
  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before and press ‘Save’ to save it
  • Here is the result you will achieve:

BSSTekLabs_0-1727368768992.png
BSSTekLabs_0-1727368768992.png1900×876 64.3 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
4

Hey @Daniel19901

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1727369214053.png
Moeed_0-1727369214053.png1896×903 52.3 KB

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

Best Regards,
Moeed

5

Hi @Daniel19901

Check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

section#shopify-section-template--23680920748380__video_background_KfmnDQ .wrapper {
    padding: 0;
}

And save.

result:

Made4uoRibe_0-1727370432840.png
Made4uoRibe_0-1727370432840.png1849×657 59.3 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!