Gap between navigation bar and custom html section

Store Design
1

Hi community,
Was hoping for advice as I can’t seem to figure it out :disappointed_face:

I’ve found a custom html to have a video section going, however it has an ugle white gap between the top bar and the top of the video. Is there a way to remove the gap (shown in image attached)

Website is: www.voozdogsupplies.com.au
Gap in question:

VoozDogSupplies_1-1669882810106.png
VoozDogSupplies_1-1669882810106.png1372×350 70 KB

Custom liquid:

video{max-width: 100%;} .section-custom-video {position:relative;} @media screen and (min-width: 750px) {.text_on_video {position: center; top: 10%; right: 10%; left: 40%; background-color: #f3f3f3; padding: 0px;} }
2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
.element-margin, .spaced-section {
margin-top: 0!important;
}

Screenshot :- https://prnt.sc/jSieAQmpIIo3

3

Hello @VoozDogSupplies

It’s GemPages support team and glad to support you today.

Due to this code

GemPages_0-1669883402096.png
GemPages_0-1669883402096.png1905×942 202 KB

Please check out my suggestion below:

  1. Go to Online Store → Theme → Edit code

  2. Open file theme.liquid then add this code to above the tag

If you require any further information, feel free to contact me.

Best regards,
GemPages Support Team

4

Hello @VoozDogSupplies

This default from theme

GemPages_2-1669883676166.png
GemPages_2-1669883676166.png1776×901 247 KB

You can follow these steps to fix:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1669883574920.png
GemPages_0-1669883574920.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1669883619975.png
GemPages_1-1669883619975.png847×831 31.6 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

5

Hello @VoozDogSupplies
Please add the below code in theme.liquid file before closing body() tag.

{% if template contains ‘index’ %}

.element-margin, .spaced-section { margin-top: 0px !important; }

{% endif %}

6

@VoozDogSupplies I think you know about code, so you can write a option config space for section this. but if you use Css, you need check the page other, because it can will create bug on page other.

I can write code to create option this, if you want please contact with me.

thank you

7

hi @VoozDogSupplies

Hope you are doing well!!

Thanks for connecting!!

Please add this css in your base.css file

@media screen and (min-width: 750px){
.element-margin, .spaced-section {
    margin-top: 0px!important;
}}