Add space between sections in Brooklyn theme - Mobile version

Technical Q&A
1

Hi! On the mobile version of my site, some sections are extremely close to one another. Is there a way to fix this without changing the desktop version? My website is www.bungalowsun.com. I would want the “What we stand for” section to be more separated from the other two sections surrounding it. Thanks!

2

Hello There,

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

3

The store is https://bungalowsun.com and the password is ShopBungalow. Thanks!

4

Hi @lilyyp ,

You can please follow these steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.
  • Step 2: Go to Asset > theme.scss.liquid and paste this at the bottom of the file:

.hero[data-adapt=false], .hero[data-adapt=false] .slideshow__overlay:before {

height: auto !important;

max-height: none !important;

}

Hope this helps!

1 Like
5

hello @lilyyp

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (max-width: 769px){
#shopify-section-1620934633f12eb712 .grid .grid__item {
	           padding: 25px 5px;
             font-size: 18px;
} 
}
1 Like
6

Worked great! Thank you so much!

7

Hello, I’m trying to do the same thing but this code didn’t work for me. Any help would be greatly appreciated! Trying to increase the space between the collection images on my homepage on Mobile view only (I’ve already changed it for desktop). I’m using Studio Theme.

www.assifassefi.com

pw skawst

Thank you!