Solved

a space between the header and the video loop in brooklyen theme

basmet_harer1
Tourist
13 0 0

Hi there! I am trying to figure out how to remove the large amounts of padding between the menu and the looping video and then the header underneath on my home page(in the mobile version). I also do not like how much room there is between the header and first section of any of my pages (example: the About Me page). Is this a Heading/Header setting? There are larger amounts of space between most of my headers and body text. I have tried a couple fixes from other discussion forums but none have worked so far so I don't think I was placing the right code in the right section. Thanks in advance for your help!

Website: basmet-harer.com

i fix that problem in the desktop version but its still in mobile version

Accepted Solution (1)
Asad-Mahmood
Explorer
50 8 8

This is an accepted solution.

sorry use this code instead

@media screen and (max-width: 767px) {
    .videoBackground .videoBox {
        min-height: 400px !important;
    }
}
If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
asadmahmood8470@gmail.com

View solution in original post

Replies 5 (5)

Asad-Mahmood
Explorer
50 8 8

Go to your online store -> customize -> settings -> custom css and paste this code there

@media screen and (max-width: 767px)
.videoBackground .videoBox {
    min-height: 400px !important;
}
If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
asadmahmood8470@gmail.com
basmet_harer1
Tourist
13 0 0

I tried youre solution and i got this error 

basmet_harer1
Tourist
13 0 0

Screenshot_20240331_003224_Samsung Internet.jpg

Asad-Mahmood
Explorer
50 8 8

This is an accepted solution.

sorry use this code instead

@media screen and (max-width: 767px) {
    .videoBackground .videoBox {
        min-height: 400px !important;
    }
}
If my solution has been helpful, you can consider supporting me via Buy Me a Coffee.
asadmahmood8470@gmail.com

ThePrimeWeb
Shopify Partner
2077 596 467

Hey @basmet_harer1,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (max-width: 989px) {
  .videoBackground .videoBox {
      min-height: fit-content;
  }
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1711833792959.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!