Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
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;
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.
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;
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)?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024