Related products not displayed on the same line

Solved
Highlighted
Excursionist
46 0 6

Hello guys, 

 

I've added the piece of code to create the "related product" section.

It is working (almost) fine except on desktop where all the products are displayed on a separate line (see picture below)

I would like to have my 5 products on the same line but can't find a way to do this.

 

Capture d’écran 2019-12-16 à 17.53.05.png

 

I've read something saying it could be linked to the fact that the product image are not the exact same size.

Do you know something about it ?

Is there a way (no matter the product image size) to have the image aligned on the same line ?

 

Thanks

0 Likes
Highlighted
Shopify Expert
1380 112 211

Please share a store url to better assist

0 Likes
Highlighted
Excursionist
46 0 6

Hello @Qualitycheck , you can have a look at https://gourde-morning.com/collections/les-nouveautes/products/bouteille-galaxy

At the bottom of the page

0 Likes
Highlighted
Excursionist
46 0 6

No one has any idea on this ? :(

0 Likes
Highlighted
Shopify Expert
1380 112 211

This is an accepted solution.

Hi @,
1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file
#ProductSection-related-products .tt-product.product-parent {
display: inline-block;
padding: 0 5px;
width: 19.7%;
margin: 0 auto;
}

Highlighted
Excursionist
46 0 6

I just did it and it looks great.. on desktop thanks for this.

However, it doesn't look great on mobile :/

Is there a piece of code I could add to keep it like it was for mobile and keep your style for desktop ?

0 Likes
Highlighted
Shopify Expert
1380 112 211

Glad that it worked on desktop.

I will see what could be done to revert it mobile devices.

However, if you are happy with the solution then please LIKE and mark it as ACCEPTED solution to help others.

Highlighted
Excursionist
46 0 6

Yep I will mark as resolved and I can give the solution I was looking for.

I've just added a 

@media screen and (min-width: 800px) {

 

So that your style applies only on screen > 800px

 

@media screen and (min-width: 800px) {
#ProductSection-related-products .tt-product.product-parent {
display: inline-block;
padding: 0 5px;
width: 19.7%;
margin: 0 auto;
}
  }
0 Likes
Highlighted
Shopify Expert
1380 112 211

That's great!

All the best for your store sales :)