Remove white space between header and body

[mahalgalang]

Hi, i need help doing this:

1. minimize the space between the video section and the header.

2. resize the logo (bigger)

Can anyone help me with this? thank you!

[ThePrimeWeb · Accepted solution]

Hey @mahalgalang,

Please paste this in the Custom CSS box in the Theme Customizer -> Settings

.videoBackground .fullscreen-video-wrap {
    height: 85%;
}

.videoBackground .videoBoxInfo {
    margin-bottom: 0;
}

.videoBackground .videoBox {
    padding-bottom: 0;
    max-height: 0;
}

@media only screen and (max-width: 768px) {
    .videoBackground .videoBox {
        max-height: 700px;
    }
}

You can find it here

Regarding the size of the image, please edit the image and crop out the whitespaces

[ThePrimeWeb]

Hey @mahalgalang,

Can you provide the link to your store?

[mahalgalang]

I'm so sorry, i forgot.

it's shop.everybodyfights.com

[ThePrimeWeb]

Thanks @mahalgalang,

I cannot find the page with the video. Which one is it?

[mahalgalang]

The theme is not live yet. Do you need for the theme to go on live ?

[Made4uo-Ribe]

You can share the preview of the unlive theme. 

[mahalgalang]

https://1x5vedwmjusxgf6r-15567447.shopifypreview.com

Here's the link. 🙂

[Made4uo-Ribe]

Hi @mahalgalang 

Please provide the preview of this problem. Thanks!

[ThePrimeWeb · Accepted solution]

Hey @mahalgalang,

Please paste this in the Custom CSS box in the Theme Customizer -> Settings

.videoBackground .fullscreen-video-wrap {
    height: 85%;
}

.videoBackground .videoBoxInfo {
    margin-bottom: 0;
}

.videoBackground .videoBox {
    padding-bottom: 0;
    max-height: 0;
}

@media only screen and (max-width: 768px) {
    .videoBackground .videoBox {
        max-height: 700px;
    }
}

You can find it here

Regarding the size of the image, please edit the image and crop out the whitespaces

[mahalgalang]

Hello! thanks for this, the spacing worked! but it still shows a small image of the logo after cropping. please advise.

Thank you!

[ThePrimeWeb · Accepted solution]

Hey @mahalgalang,
In your website I still see the old image with the large gaps on top and below, did you already replace it with the cropped one?

You can try adding the CSS below, but I would much rather recommend for you to edit the logo directly than to amend with code as there's always going to be loss of quality when you try to increase asset size by code.  

img.header__heading-logo.header__heading-logo--svg {
    transform: scale(1.5);
}

[mahalgalang]

I see what you mean. Thank you for this though. 🙂