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

basmet_harer1 · ‎03-30-2024

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

Asad-Mahmood · ‎03-30-2024

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.
Hire me: asadmahmood8470@gmail.com
WhatsApp

View solution in original post

Asad-Mahmood · ‎03-30-2024

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.
Hire me: asadmahmood8470@gmail.com
WhatsApp

basmet_harer1 · ‎03-30-2024

I tried youre solution and i got this error

basmet_harer1 · ‎03-30-2024

Asad-Mahmood · ‎03-30-2024

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.
Hire me: asadmahmood8470@gmail.com
WhatsApp

ThePrimeWeb · ‎03-30-2024

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.

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!

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

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

☕Buy me a coffee☕

Community Blog Articles