Aligning Product Page Thumbnails in Brooklyn

Solved
JErgo
Excursionist
22 1 6

Hi! Noticing a thumbnail alignment issue on some of my products.  I am using the Brooklyn theme.

Some of my product thumbnails on the Product Detail page. I'd like the thumbnails to line up with the image above. Below is an example of the issue - you can see with the red marker where I'd like to see it aligned so there's not overhang on the left. Any suggestions? 

Thanks in advance!

Screen Shot 2021-04-17 at 10.42.45 AM.png

 

0 Likes

Please share your website URL.

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

Here is the Preview Link

0 Likes

Add this at the bottom of your Theme.css File.

.product-single__thumbnails {
    margin-left: 15px !important;
}

 

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

Please let me know if it works for you.

 

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
JErgo
Excursionist
22 1 6

So it worked for that particular product in the previous link, but didn't work on others such as these:  Philomena Top and Bluebell Dress .

0 Likes

Remove the previous code and try adding this.

@media screen and (min-width: 591px)
.product-single__media-group--single-xr .product-single__media-flex-wrapper {
    margin-left: -30px;
}

 

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
JErgo
Excursionist
22 1 6

Thanks for your help on this! Unfortunately that code did not work.  It undid other code I have for product page layout, as well as affected my collection pages and search function, and reverted some theme selections.

0 Likes

It's strange, please add me as a staff so I can have a look.

Email: shopify.zeian@gmail.com

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

Sorry, I did some mistake while sending. Please try this and let me know.

@media screen and (min-width: 591px){
.product-single__media-group--single-xr .product-single__media-flex-wrapper {
    margin-left: -30px;
}
}
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