Change related product alignement

Hi all!

The question has to do with the display of the related products on any product page in the store:
- If I have less than 3 items to display, I would love to center the related products on the page (takes 3 items/line max)

- If I have more than 3 items to display, I would love to display only 3. No preference: random choice, or the 3 firsts...

Is it possible? Could I solve that with some extra code? Can someone please assist me?

Hope it's a good year 🙂

Can you provide any links which show both scenarios?

Thanks for your reply tazmeah.

Sadly my site isn't published yet, I don't know that I can share a link of my website...?
Here are two pictures, first on shows two related products down the bottom and I'd like to center them if possible (same if it was only 1 item to display).
Second image shows the case where there are more than 3 products. Ideally I'd like to show only three. If not, at least center the second line.

What do you think?

sorry, up

On 1/8/2021 at 4:23 PM, Tone said:

sorry, up

You can setup password & share url.

Sorry yes indeed, I just discovered that. Thanks.
password is: pianoharbourtest

There is one URL here with the 2 associated product scenario: https://www.pianoharbour.com.au/store/p/feurich125

And one here with more than 3 products: https://www.pianoharbour.com.au/store/p/pls-covers

Thanks to anyone who could give me a plug!

On 1/16/2021 at 1:36 PM, Tone said:

Sorry yes indeed, I just discovered that. Thanks.
password is: pianoharbourtest

There is one URL here with the 2 associated product scenario: https://www.pianoharbour.com.au/store/p/feurich125

And one here with more than 3 products: https://www.pianoharbour.com.au/store/p/pls-covers

Thanks to anyone who could give me a plug!

Add to Design > Custom CSS

@media screen and (min-width:768px) {
.ProductItem-relatedProducts {
.list-grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
}
.grid-item {
    width: 25%;
}
}
}

1 hour ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (min-width:768px) {
.ProductItem-relatedProducts {
.list-grid {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
}
.grid-item {
    width: 25%;
}
}
}

 

Genius, geniussss 🙂

On 1/18/2021 at 3:31 PM, Tone said:

Genius, geniussss 🙂

Do you want to align left footer elements on mobile?

On 1/20/2021 at 7:37 PM, tuanphan said:

Do you want to align left footer elements on mobile?

You picked my mind, I would like to center the "back to top" button on mobile, no clue how to do so though.

Sorry Tuanphan, was I supposed to get the code from your previous image, I'm confused now.

On 1/28/2021 at 5:11 PM, Tone said:

Sorry Tuanphan, was I supposed to get the code from your previous image, I'm confused now.

Hi. Sorry for the delay. I was off some day.
Add to Design > Custom CSS

/* Center back to top mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1606257616621_5795>div {
    margin: 0 auto;
    text-align: center;
}
}