Adjusting the white space on the Brooklyn theme

Solved
Highlighted
Excursionist
14 3 2

Hi there! 

I'd like to adjust the white space between the Hero slider and  Featured Collection section on the homepage. 

I tried the following:

 

Original code:
.index-sections { .shopify-section:first-child { margin: 0
}
.index-sections {
  .shopify-section:first-child {
    margin: 0;
    padding-top: 0px;
    padding-bottom: 0px;
  }

So when I added padding-top: 25px or whatever, I could see that it increased the space between the slider and the store section, but when I set it at 0 - nothing has changed. How I can make it even smaller? Can someone tell me the code I need to add to the various sections please?

 

Thanks in advance :)

issue.JPG

0 Likes
Highlighted

Success.

Shopify Expert
110 20 41

If I'm understanding what you're asking for correctly, here's how you can fix this. Read this through all the way before doing anything.

 

To fix this in the CSS file you need to find this line of code in assets/timber.scss. However this is used globally on the site so if you make this change, it will bring up the content on the homepage, but also all other pages.

 

 

@media screen and (min-width: 769px) {
  .main-content {
    padding-top: 80px;
  }
}

NOTE: it won't look exactly like that. You need to find the @media part first and somewhere inside the { part will be the .main-content part.

 

 

If you want to pull it up on the homepage only, add this code to right above where </head> exists in the layout/theme.liquid file.

{% if template == 'index' %}
<style>
.main-content {
  padding-top: 80px;
}
</style>
{% endif %}

 

In both cases, just adjust the spacing by changing 80 to a smaller number. Hope that helps.

2 Likes
Highlighted
Excursionist
14 3 2

Yeeeeiiiii!!!! Thank you very much!!! 

I added that code and it just what I needed!! Thank you A LOT!!!

{% if template == 'index' %}
<style>
.main-content {
  padding-top: 80px;
}
</style>
{% endif %}
0 Likes
Highlighted
Shopify Expert
110 20 41

You're welcome. Glad it worked for you! 

0 Likes
Highlighted
New Member
3 0 0

I am having so much trouble eliminating space above, in-between, and below my featured products on the home pageScreen Shot 2020-01-27 at 3.13.40 PM.png

 

 

I tried adding the code right above </head> in liquid themes but nothing seems to be working. Wondering if you could help me out!? Thanks

0 Likes
Highlighted

Hello @rytaft13,

Please share your site url so that I will give you exact solution

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
3 0 0
Yes thank you so much man. So there’s only two products currently on the
store. I took the featured collection off the home page and added it to my
side menu bar. What I’m looking help on is the space above and below the
“want discounts” newsletter on the homepage below my “why choose us” rich
text. It looks awful because all of the space.

Iconicimagesco.com
0 Likes

Hello @rytaft13,

1. Go to Online Store->Theme->Edit code
2. Asset->timber.scss.liquid->paste bellow code in bottom of file

.template-index .hr--large {
	margin: 0 auto 20px auto;
}
#shopify-section-1579667711045 .rte p:nth-child(8) {
	margin-bottom: 0;
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
New Member
3 0 0
Thank you so much for the help man. Sadly this didn't work, perhaps I am
doing something wrong. I copied and pasted it in the bottom of that file
and nothing happened.
0 Likes