Need help aligning the product cards

Store Design

Topic summary

A user is experiencing alignment issues with product cards on their Shopify store (trendlabb.com), particularly noticeable on mobile view. They previously received and applied CSS code to limit product titles to 2 lines and set swiper slides to auto height, which partially resolved the problem. However, some products remain misaligned.

Current Status:

  • The issue persists despite implementing the suggested CSS fix
  • Mobile view shows particularly poor alignment
  • An image was shared showing the alignment problem

Responses:

  • One user requested the store link for further investigation
  • Another recommended a YouTube tutorial video on aligning product cards as a step-by-step guide

The discussion remains open with no definitive solution yet provided.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

I need help with the alignment issue. my product cards are not aligned. Here’s a quick look:

ncsjcnjs_0-1741943281037.png
ncsjcnjs_0-1741943281037.png1816×762 277 KB

url: trendlabb.com
I already asked this question and got the solution. I applied this code:

a.product__card-title–link {
display: -webkit-box !important;
-webkit-line-clamp: 2; /* Maximum 2 lines */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}

.swiper-slide {
height: auto !important;
}
it works though a few of my products are still not aligned. on mobile view, it looks horrible due to uneven alignment. help

2

Hello, can you send the link of your store? Thanks

3

Hi there @ncsjcnjs If you are someone that learns well with videos and following the process step by step, I highly recommend that you give this video a watch and I believe it would guide you on how to align them as well as possible https://m.youtube.com/watch?v=HybcJ4jwAmY