Related products not displayed on the same line

Solved
Highlighted
Excursionist
40 0 4

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 Partner
1239 102 155

Please share a store url to better assist

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Excursionist
40 0 4

Hello @Perennial , 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
40 0 4

No one has any idea on this ? :(

0 Likes

Success.

Shopify Partner
1239 102 155

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;
}

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Excursionist
40 0 4

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 Partner
1239 102 155

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.

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like
Highlighted
Excursionist
40 0 4

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 Partner
1239 102 155

That's great!

All the best for your store sales :)

Thanks & Regards
Perennial Solution

Problem Solved?✔️Like and Accept the solution that can help others.
Need any help with theme customization or design? Hire us
Email: infoperennialsolution@gmail.com
Skype: infoperennialsolution
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
1 Like