No product shown in next line because of too long product name

Store Design
, , ,

Topic summary

A user encountered a layout issue where products with long names in their collection page prevent products from displaying in the next row, causing misalignment.

Proposed Solutions:

Two community members offered CSS-based fixes:

  • Solution 1: Add CSS code to the timber.scss.liquid file (Assets folder) using flexbox properties (display: flex and flex-wrap: wrap) with a media query for screens up to 600px max-width.

  • Solution 2: Insert code at the bottom of the theme.liquid file via Online Store > Theme > Edit code.

Both solutions aim to enable proper wrapping of product grid items to prevent layout breaks caused by lengthy product names.

Status: The issue remains unresolved as the original poster has not confirmed whether either solution worked.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

Hello,

Can someone tell me how I can avoid that if the product name is too long in the collection, no product is displayed in the following row? (pictures attached)

Store URL: aliudclothing.com

IMG_7902.PNG
IMG_7902.PNG1170×2532 145 KB

IMG_7903.PNG
IMG_7903.PNG1170×2532 164 KB

2

Hi @KimGottwald

You can solve it by adding this CSS code at the bottom of your timber.scss.liquid file in Online store > Themes > Edit code > Assets

@media only screen and (max-width: 600px) {
.grid-uniform {
    display: flex;
    flex-wrap: wrap;
}
}

Screenshot 2023-09-28 at 16.44.14.png
Screenshot 2023-09-28 at 16.44.14.png392×539 28.3 KB

3

Hi @KimGottwald ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly