Need help in aligning product cards

Store Design
1

Hi!

ncsjcnjs_0-1741862144292.png
ncsjcnjs_0-1741862144292.png1636Ă—688 190 KB

I need some help to fix my collection page. I need the product cards aligned and even there are some with color swatch and others no
product page: https://trendlabb.com/collections/all

2

Hi @ncsjcnjs

You can try add this code in base.css

.collection ul.productListing li.product {
display: flex;
align-items: flex-end;
}

Hope this helps :slightly_smiling_face:

1 Like
3

Hey folk, thanks but this code doesn’t work for me. The issue is still same

4

Good day @ncsjcnjs ,

To achieve this, follow these simple steps:

  1. Go to the online store then select your theme.
  2. Edit the code.
  3. Find the base.css file or locate the theme.liquid file, and then update the following code inside the tag.
.product-grid-container .row {
    --bs-gutter-y: 20px;
}
.product-grid-container .product__card{
    height: 100%;
}​

Here, is the screenshot of the same.

grid-alignment.png
grid-alignment.png1294Ă—762 228 KB

If you found this solution helpful, please like and accept my solution. If you have any further queries, feel free to ask, and I will be happy to assist you.
(S.P)

1 Like
5

@Huptech-Web , very thanks for your help. it really worked. I have one more query. on the homepage (the product tab section), the alignment is off. how to fix please let me know. and yeah, again thanks for your help

ncsjcnjs_0-1741868238719.png
ncsjcnjs_0-1741868238719.png1677Ă—786 210 KB

6

Same for the featured collection tab as well

ncsjcnjs_1-1741868422367.png
ncsjcnjs_1-1741868422367.png1612Ă—786 242 KB

how to fix alignment. this section is located on my homepgae

7

Hey @ncsjcnjs , Glad to know that my solution works for you, to get the same alignment of cards in home page trending products just paste this below code.

.product__card.product--corner-radius-true {
    height: 100%;
}

Here is the screenshot of the same.

grid-cards.png
grid-cards.png854Ă—558 229 KB

If you found this solution helpful, please like and accept my solution. If you have any further queries, feel free to ask, and I will be happy to assist you.
(S.P)

1 Like
8

@Huptech-Web And for featured collection that’s mentioned on homepage? Also, just one last question: how could i make product title appear as … after taking two lines.
For example,

Original Title: Women’s Posture Corrector Lift Up Bra Medical Back Support Sports Support Fitness Vest Bras Shockproof Breathable Underwear Crotch Back Corset Bra
Title appearing under two lines: Women’s Posture Corrector Lift Up Bra Medical Back Support…