Solved

Remove white space between header and body

mahalgalang
Tourist
7 0 1

capture_20240123002450671.jpg

 

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!

Accepted Solutions (2)

ThePrimeWeb
Shopify Partner
1198 311 229

This is an 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

ThePrimeWeb_0-1705981987391.png


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

ThePrimeWeb_1-1705982037409.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

ThePrimeWeb
Shopify Partner
1198 311 229

This is an 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);
}

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

Replies 11 (11)

ThePrimeWeb
Shopify Partner
1198 311 229

Hey @mahalgalang,

Can you provide the link to your store?

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
mahalgalang
Tourist
7 0 1

I'm so sorry, i forgot.

it's shop.everybodyfights.com

ThePrimeWeb
Shopify Partner
1198 311 229

Thanks @mahalgalang,

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

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
mahalgalang
Tourist
7 0 1

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

Made4uo-Ribe
Shopify Partner
5133 1226 1501

You can share the preview of the unlive theme. 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


mahalgalang
Tourist
7 0 1

Made4uo-Ribe
Shopify Partner
5133 1226 1501

Hi @mahalgalang 

Please provide the preview of this problem. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


ThePrimeWeb
Shopify Partner
1198 311 229

This is an 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

ThePrimeWeb_0-1705981987391.png


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

ThePrimeWeb_1-1705982037409.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
mahalgalang
Tourist
7 0 1

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

 

Thank you!

ThePrimeWeb
Shopify Partner
1198 311 229

This is an 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);
}

 

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
mahalgalang
Tourist
7 0 1

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