Brooklyn Theme Product Pages; Reduce Padding & Fix Menus?

Solved
wickedbride
Tourist
7 1 6

Hello! I'm trying to tighten up the spacing on my Brooklyn theme product pages. I've tried several edits I found on the board, but nothing worked. Here's what I'm looking to do:

1. Reduce the padding at the top of the product name/title - I'd like it to align with the product photo, if possible

2. Reduce the spacing under the title/price

3. Is there a way to align the titles for the variant dropdowns to the left of the selection, like how the quantity variant is already displayed? 

Any help or advice is appreciated! Site is www.wickedbride.com if needed for reference. 

 

Screen Shot 2021-06-17 at 8.13.53 PM.png

dmwwebartisan
Shopify Partner
7287 1720 2291

@wickedbride 

Please add the following code at the bottom of your assets/theme.scss.liquid file.

@media screen and (min-width: 769px){
.product-single__meta { padding-top: 0px !important; }
.product-single__policies { margin: 0px 0 18px 0 !important; }
.product-single__meta--wrapper{ padding-right: 10px !important; }
.radio-wrapper .single-option-radio__label{ display: initial !important; }
.radio-wrapper .single-option-radio__label:after { content: ":" }
}

 

Hope this works.

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
LitExtension
Shopify Partner
1182 145 206

This is an accepted solution.

Hi @wickedbride

Please follow the steps:

- Step 1: Go to Online store > Themes > Actions > Edit code.

- Step 2: Go to Assets > theme.scss.liquid and paste this at the bottom of the file:

// For 1

.product-single__meta{

  padding-top: 0px !important;

}

// For 2

.product-single__policies{

  margin: 0px !important;

}

// For 3

.radio-wrapper .single-option-radio__label{

  display: inline-block !important;

  margin-right: 10px;

}

.radio-wrapper .single-option-selector__radio{

  display: inline-block !important;

}

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
wickedbride
Tourist
7 1 6

This worked perfectly, thanks so much! 

0 Likes