Get rid of weird gap on Brooklyn home page

Solved
Caprice1
Tourist
5 0 0

Hello, 

I've been struggling with this for a while and nothing works.

I'm using the Brooklyn theme. I made some adjustments to the code to make the "image with text" section full width and change the background of it to a darker color. Unfortunately, there is now a weird space above the "image with text" section that I can't get rid of. You can see what I mean if you go to the site here: https://lukes-washer-games.myshopify.com/. Right below the top header image, there's a gap and then the "image with text" section. 

Any ideas on how I can delete this gap? 

Thanks so much in advance for any help! 

0 Likes
PeanutButter
Shopify Partner
330 66 137

This is an accepted solution.

Adding the following at the end of theme.scss.liquid should do the trick:

#shopify-section-1604707356258b7d7c {
    margin-top: 0;
}

However, be aware that if you add a new image with text section, it will have a different Id and the change will not be applied to the new section.
You would have to add the new section's id to this code like this

#shopify-section-1604707356258b7d7c,
#shopify-section-thisIsTheNewId
 {
    margin-top: 0;
}

 

There could be a safer and more permanent solution using a negative margin on a div inside the section.
Let me know if this first fix is enough for you and if not I will elaborate in the second option

If the solution fixes your issue please Like and Accept my answer

thanks

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
PeanutButter
Shopify Partner
330 66 137

This is an accepted solution.

The more permanent solution

1. Open Sections/featured-row.liquid and in the first line:

change this:

 

<div class="wrapper">

 

to this:

 

<div class="wrapper feature-row__wrap">

 

 

Then at the end of theme.scss.liquid, add the following:

 

.feature-row__wrap {
   margin-top: -90px;
}

.feature-row__wrap {
   @include at-query($max, $medium) {
       margin-top: -45px;
   }
}

 

 

Please remember to Like and mark as Accepted my answer if it fixes your issue

thanks

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
Caprice1
Tourist
5 0 0

Thank you SO MUCH. That fixed it! I ended up going with the first option since I'd prefer that other "image with text" sections behave as they originally did. Thanks a lot, you just saved me a huge headache!! 

0 Likes