How can I remove empty space header

Store Design
, , ,
1

Hi,

I’ve created a video background header for my website, however no matter what I do there is a huge empty space between the header and the featured collection etc. how can I remove this space? Much appreciated!!

My website

motions_0-1748425712883.png
motions_0-1748425712883.png1905×787 124 KB

2

Hi,

Hope this will work

  • Find the Section with the Video Header and add the css or change the padding

css example

.video-section,
.video-header,
.video-container {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
3

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

.drawer__footer {
display: none !important;
}

result

26.png
26.png1344×559 242 KB

If this was helpful, hit the like button and accept the solution.
Thanks

4

Hi @motions

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

websensepro_1-1748429832315.png
websensepro_1-1748429832315.png1355×542 195 KB

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

5

Hi @motions

You can add below CSS at the bottom of theme.liquid file and see if works or not:

If still not working, please kindly check if your store exists related code contents already and if so, please kindly share the code content in theme.liquid and I will do my best to check it for you. Thank you!