How can I fix the large space issue in mobile view on Brooklyn theme?

Technical Q&A
1

on the mobile view, the title and text were below the slide show, so I put this code below to fix it

@media only screen and(max-width:768px){
.hero__text-content.hero__text-content–adapt.text-center {
top: -200px!important;
color: white!important;
font-size: 10px!important;
}
}

It works, but there is something wrong, there is now a big space between the slideshow and the follow section, anyone knows how to fix this ?

I’m using Brooklyn theme

Screenshot.jpg
Screenshot.jpg1072×1643 137 KB

2

Hi @Medy06

Would you mind sharing your store’s URL so we can assist on that?

3

Hello Medy06,
Please share your site url.
So that I can check and let you know the exact solution here.

4

www.waterlys.com

5

Add the following code to the end of your timber.scss.css file:

@media only screen and(max-width:768px)
{
#shopify-section-161678277396657f11 {
    margin-top: -110px;
}
}

That should do it! Don’t forget to like and mark as solution if this solves your issue!

6

Add this css at the bottom of
Online Store->Theme->Edit code->Assets->theme.scss.liquid

@media screen and (max-width: 768px){
#shopify-section-161678277396657f11 {
    margin-top: -100px !important;
}
}
7

That works, thanks a lot

but on the others slideshow on the home page, it does not work, is it possible to make it permanent each time I have to create a slideshow on home page ?

8

Add the following extra code:

@media screen and (max-width: 768px)
{
#shopify-section-16186623461235410f {
    margin-top: -160px;
}

#shopify-section-1616782620d5205165 {
    margin-top: -180px;
}
}

It will have to be done manually for each section.