White space between Slideshow and section with a background colour - Brooklyn theme

Technical Q&A
1

Hello,

2 problems:

  • On the home page, there is a white space under my hero slider that I can’t get rid of, it’s not a margin. I think it’s linked to the way the slider is resizing, it seems to be in the wrapper and because my next section doesn’t have a white background, I have this annoying white band in between the 2 section

  • I have a vertical scroll bar that appeared, it seems that the content of my home page is a tiny bit wider than my hero slider. I have used bootstrap as well as CSS provided on the theme.

problem-100.jpg
problem-100.jpg1921×1039 201 KB

Thanks!

1 Like
2

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

3

Welcome to shopify community.

Please share your store URL and if your store is password protected then please provide password too.

Thank you.

4

Thanks, I have sent you URL and password.

1 Like
5

Hi @ClayandRose ,

Please send your site and if your site is password protected, please send me the password. I will check it for you.

6

URL is www.clayandrose.co.uk but I am not working on the live site theme, I’m working on a copy that isn’t live. is there anything else you would need to access it?

1 Like
7

Hi @ClayandRose ,

If it doesn’t publish can you send me the preview link and password. I will check it and guide you.

8

@ClayandRose
If it doesn’t publish can you send me the preview link. so that I will check it and guide you to fix it out.

9

This is the preview link.

https://5lypymgdcv6eaabc-53793882296.shopifypreview.com

The white space only happens when the window is smaller, like on a phone screen or tablet, if the window opens in full screen straight away, the white band diesn’t show.

Also, if you reduce the size of the window and stretch it back to full size, the white band stays.

10

Hi @ClayandRose ,

Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

.index-slideshow-section .slick-slider .slick-list{
	height: 100% !important;
}

Hope it helps!

11

Amazing, thank you so much! @LitExtension

Do you know how I can get rid of the horizontal scroll bar?

And also if you could help with the little white lines in between my columns still on the homepage… I used bootstrap. Thanks!

12

Hi @ClayandRose ,

Please add code:

.site-nav__dropdown{
	left: auto !important;
    right: 0 !important;
}
.site-nav--has-grandchildren .site-nav__dropdown-link {
    padding-right: 15px !important;
    padding-left: 45px !important;
}
.site-nav__dropdown-link .icon-arrow-down{
	transform: translateY(-50%) rotate(90deg) !important;
	right: auto !important;
    left: 15px !important;
}
.site-nav__dropdown-grandchild{
	right: 100% !important;
	left: auto !important;
}

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

1 Like
13

Thank you sooo much for help!

1 Like