Removing spacing between banner & video

Store Design
, , , ,

Topic summary

A user wants to reduce the spacing between a banner and video section on their Shopify store, aiming to position the banner text closer to the video content (as shown in an attached image).

Two CSS solutions were provided:

  1. GTLOfficial’s approach: Add CSS to base.css targeting the specific video section padding on desktop screens (min-width: 750px), setting padding-top: 0px !important.

  2. topnewyork’s approach: Insert CSS code in the theme.liquid file before the </head> tag (specific code snippet not visible in transcript, but includes a result screenshot).

Both solutions involve custom CSS modifications to remove or reduce top padding. The discussion remains open with no confirmation from the original poster about which solution worked or if the issue is resolved.

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

I want the banner text to sit around where i have circled in the image below.

URL: hygiadental.com
pw: angel

Thank you in advance!

Untitled design.png
Untitled design.png2048×504 48.1 KB

1 Like
2

Hello @Anonymous
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

@media screen and (min-width: 750px) {
.section-template--17786616774756__video_MqdRwj-padding {
padding-top: 0px !important;
}
}

Thanks

3

Hello @Anonymous

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

Result:

topnewyork_0-1738066616735.png
topnewyork_0-1738066616735.png793×567 219 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

Use our Big Bulk Discount app to boost your sales!(https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!