Reduce product text size in featured collection

Store Design
,

Topic summary

A user seeks to reduce the product title font size in their featured collection on a Shopify store using the Reformation theme. They also ask if text rows can be capped at 3 lines to maintain even alignment.

Solutions Provided:

Two community members offer CSS-based fixes:

  • PageFly-Richard suggests adding custom CSS to product-grid.css that sets font size to 14px on mobile devices and implements a 3-line text clamp with overflow hidden
  • INA_MSWEB recommends a simpler approach: adding .product-card .product-card-title {font-size: 13px !important} to the bottom of the CSS file

Both solutions involve editing the theme code through Online Store ā†’ Theme ā†’ Edit code. The discussion remains open with no confirmation from the original poster on which solution was implemented or whether the issue was resolved.

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

Hi All,

Trying to reduce the font size of the product title on featured collection.

URL;https://label-source.co.uk/

Theme: Reformation

Can the rows of text be capped at 3 rows? currently text is uneven

Thank you,

Screenshot 2023-03-08 at 15.13.52.png
Screenshot 2023-03-08 at 15.13.52.png758Ɨ732 181 KB

1 Like
2

Hi @Danielparsons ,

This is Richard from PageFly - Landing page builder, Iā€™d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/product-grid.css->paste below code at the bottom of the file:

@media screen and (max-width: 749px) {
    .product-title-uppercase-true .product-card .product-card-title {
        font-size: 14px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;  
        overflow: hidden;
    }
}

PageFlyRichard_0-1678288871222.png
PageFlyRichard_0-1678288871222.png333Ɨ527 57.3 KB

I hope it would help you
Best regards,

Richard | PageFly

1 Like
3

Hi @Danielparsons

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the css file:

.product-card .product-card-title {font-size: 13px !important;}

Regards,

San