Solved

How to reduce padding on Brooklyn Theme

Vettaa
Visitor
1 0 0

I was wondering how I can reduce this padding on my website with the Brooklyn Theme. 

I saw a couple of other threads about this but they were all outdated. Any help would be great. 

Thank you. 

Example.png

Accepted Solution (1)

drakedev
Shopify Partner
685 148 229

This is an accepted solution.

Hi, 

in Brooklyn Theme  the default padding you have on top between the header menu and the product page content is 80px for Desktop.

You can find the code inside timbers.css.liquid file here:

.main-content {
  display: block;

  // to be kept before Sections Everywhere
  body:not(.template-index) & {
    padding-top: $gutter;

    @include at-query($min, $large) {
      padding-top: $contentTopMargin;
    }
  }

  @include at-query($min, $postSmall) {
    padding-bottom: 40px;
  }
}

 

The variable you need to change is $contentTopMargin that you can find at the beginning of the same file at around line 393.

You can change $contentTopMargin to any value you prefer.

// Sizing variables
$gutter: 30px;
$gridGutterMobile: 22px;
$section-spacing-small: 35px;
$gridGutter: 30px; // can be a %, but nested grids will have smaller margins because of it
$contentTopMargin: 80px;
$contentTopMarginSmall: 35px;
$radius: 0;
$customSelectHeight: 46px;

 

If my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.

View solution in original post

Replies 3 (3)

Kinjaldavra
Shopify Partner
2302 570 1422

hello @Vettaa 

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

drakedev
Shopify Partner
685 148 229

This is an accepted solution.

Hi, 

in Brooklyn Theme  the default padding you have on top between the header menu and the product page content is 80px for Desktop.

You can find the code inside timbers.css.liquid file here:

.main-content {
  display: block;

  // to be kept before Sections Everywhere
  body:not(.template-index) & {
    padding-top: $gutter;

    @include at-query($min, $large) {
      padding-top: $contentTopMargin;
    }
  }

  @include at-query($min, $postSmall) {
    padding-bottom: 40px;
  }
}

 

The variable you need to change is $contentTopMargin that you can find at the beginning of the same file at around line 393.

You can change $contentTopMargin to any value you prefer.

// Sizing variables
$gutter: 30px;
$gridGutterMobile: 22px;
$section-spacing-small: 35px;
$gridGutter: 30px; // can be a %, but nested grids will have smaller margins because of it
$contentTopMargin: 80px;
$contentTopMarginSmall: 35px;
$radius: 0;
$customSelectHeight: 46px;

 

If my answer was helpful click Like to say thanks
If the problem is solved remember to click Accept Solution
Shopify/Shopify Plus custom development: You can hire me for simple and/or complex tasks.
MCOFA
Excursionist
28 0 5

This works on most pages, but not the home page. Do you know where to edit the same padding at the top of the home page (under the menu)?