Aligning Product Page Thumbnails in Brooklyn

Solved
JErgo
Excursionist
22 1 6

Hmm, that didn't quite work either but it didn't cause the issues of  the earlier code!

I was inspecting the code again and I think it might be the padding or width of the grid or ProductMediaGrou-product-template, see the highlighted portion below.  That line is currently showing 564.980 x 659.980.  When I change it to 500 x 659.980 on the Inspect Element it seems to fix the issue.  

Screen Shot 2021-04-17 at 12.53.11 PM.png

 

0 Likes

Ok. Try this then.

#ProductMediaGroup-product-template{
 width: 500px;
}

 

Zeian Shahzad | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Email: shopify.zeian@gmail.com
Cheers!!
JErgo
Excursionist
22 1 6

Thank you for that! So close! I added in a media screen line to it because it wasn't resizing properly when looking at mobile view.

With the code below, the product thumbnails are lining up with the main image and it's resizing for mobile view.

It works fine for fullscreen and desktop mode. However, something is off when I resize a desktop window - Cove Cover-Up. Product description overlaps the product images as low as 590px before it changes properly for mobile view. Do you think I should add some right-side padding? Not sure what could be the issue there but we are very close to a perfect solution!

Screen Shot 2021-04-17 at 1.33.07 PM.png

#ProductMediaGroup-product-template{
  @media screen and (min-width: 768) {
 width: 500px;
}
}

 

0 Likes

This is an accepted solution.

It works for @JErgo.

.product-single__media-wrapper {
  margin-left: 0px !important;
}
.product-single__thumbnails img {
    width: fit-content;
  
}

 

 

Zeian Shahzad | Designer | Developer
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Email: shopify.zeian@gmail.com
Cheers!!
0 Likes