Change width of image and description in Brooklyn theme?

New Member
4 0 0

I've been looking for a while, and haven't been able to find any existing resources for this issue.

I love the Brooklyn theme, but the images on the product pages are way too big and the column for the description is very narrow. How can I edit these parameters in the code? I'm a coding novice, but I know enough to get by with editing stuff if I have instruction.

Help is much appreciated, thank you!

0 Likes
Excursionist
58 0 8

Hi Anna,

As a precaution, duplicate your theme first and modify the duplicate as to not destroy your live store.  Assuming you're using the latest version of Brooklyn, you can try this.  Find the file 'product-template.liquid' in the /sections folder.

Change:

<div class="grid product-single">
    <div class="grid__item large--seven-twelfths medium--seven-twelfths text-center">
        ... A lot of code....
    </div>
    <div class="grid__item product-single__meta--wrapper medium--five-twelfths large--five-twelfths">
        ... A lot of code....
    </div>
</div>

To:

<div class="grid product-single">
    <div class="grid__item large--five-twelfths medium--five-twelfths text-center">
        ... A lot of code....
    </div>
    <div class="grid__item product-single__meta--wrapper medium--seven-twelfths large--seven-twelfths">
        ... A lot of code....
    </div>
</div>

You'll notice that in all instances, "five" is changed to "seven" and "seven" is changed to "five".  These represent the ratio that each column take up (out of twelve).  So The image column takes up 5/12 of the width of the grid container instead of 7/12, making it smaller.  The same happens for the description column, but it gets larger instead.

"medium" and "large" essentially mean "tablet" and "desktop".  This is definitely a simplification as it could possibly create layout problems that would need more fine-tuning, but maybe it will do the trick for you :) But don't forget to duplicate first as this is at your own risk.

Cheers,
Kevin

3 Likes
New Member
4 0 0

I was able to fix it perfectly! I can't thank you enough!

0 Likes
Excursionist
58 0 8

You're welcome :)

0 Likes
Tourist
4 0 1

Hey Anna, It looks like the comment helping you was deleted! Can you please share with me how you were able to fix this issue? I'm having the exact same problem, but I looked at your website and it looks perfect! Exactly what I need to do now for mine! Thanks in advance :) 

0 Likes
Tourist
4 0 2

Hi Anna, Hi Kelsie,

 

Good morning, may i seek your help if you have got the code?

I would like to do the same too!

 

Regards,
Philip

0 Likes
Explorer
94 1 4

I've done this code The problem is that product images look small and the product description looks big Please, I want the solution /https://supportcatlive.com/products/cubic-zirconia-cat-necklace-in-sterling-silver2222.PNG

0 Likes
Tourist
4 1 1
Perfect solution. This is what I was looking for. Thank you!
0 Likes
Tourist
4 0 2

Hi!

thanks! that works super for desktop.

but is there any similar solution for mobile?
on mobile the image still is super-big

 

Cheers

Markus

0 Likes