Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Change related product alignement


Tone

Question

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 🙂

Link to comment

11 answers to this question

Recommended Posts

  • 1
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%;
}
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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?

2items.jpg

4items.jpg

Link to comment
  • 0
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 🙂

Link to comment
  • 0
On 1/20/2021 at 7:37 PM, tuanphan said:

Do you want to align left footer elements on mobile?

image.thumb.png.51845b0d408aed56e24ac925e6f771be.png

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

Link to comment
  • 0
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...