Brooklyn Theme Help

Solved
Highlighted
Tourist
3 0 1

On my shop (www.fadegrafix.com) there is a large space between the header and the item right below it. I'm trying to find out how to remove that space. It is quite noticeable on mobile devices. 

Also, I need to get the padding around my collection collage to be equal.  The is currently a thin margin top to bottom and a wide margin side to side.

Lastly, in the footer, there is a gap between the refund and shipping policies (visible on mobile only). I've checked to make sure there isn't a blank page reference in there.

Any help would be appreciated.

Clark

0 Likes
Highlighted
Excursionist
19 1 5

This is an accepted solution.

Looks like you've got a top margin of 110px in your theme.css file in the .shopify-section class. In case you're not aware, you can right click on the page and select "inspect element" to open the inspector, which is really helpful in diagnosing problems like this (the inspector also lets you simulate mobile phone screens of different sizes).

chcsep_0-1600098213692.png

 

1 Like
Highlighted
Trailblazer
265 68 75

Hi @FADE 

Thanks Welcome to the Shopify community!

1. Go to Online Store->Themes->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.index-sections .shopify-section:first-child:not(.shopify-section--full-width) {
    margin-top: 30px;
}
body:not(.template-index) .main-content {
    padding-top: 30px;
}
.product--wrapper {
    max-width: 100% !important;
}
.product--image {
    max-height: inherit !important;
    max-width: 100% !important;
}
@media only screen and (max-width: 749px){
	.site-footer__linklist {
	    margin-bottom: 0;
	}
	.site-footer .grid__item {
	    padding-bottom: 0;
	}
}
If helpful then please Like and Accept Solution.
-Want to modify or custom changes on store Hire me.
- Feel free to contact me on vikaschovatiya02@gmail.com regarding any help
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
Highlighted
Tourist
3 0 1

You know I tried to find that, just wasn't looking in the right area.  But that took care of it.  Now to get the collection collage evenly spaced.

1 Like
Highlighted
Tourist
3 0 1

I actually had to go into the size variables to get the collection grid looking right again. Just incase anyone runs across this same issue the code on lines380-388 should look like this:

// 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;
0 Likes