Issue with Product Title Truncation/Line Wrap on Mobile Devices

Hi Team,

I am experiencing an issue regarding product title visibility across different screen sizes and device views.

For example, for products with variations/weights in their titles like “Süzme Çiçek Balı (850g)” and “Süzme Çiçek Balı (450g)”, the weight details get cut off on smaller screens. In some views, both products appear simply as “Süzme Çiçek Balı”, and on even smaller layouts/sliders, it truncates to just “Süzme Çiçek”.

This makes it impossible for customers to distinguish between product sizes on mobile devices without clicking into the product page.

I would like to know:

How can I ensure that full product titles (including multi-line titles/wrapping) are completely visible across all screen sizes?

Is there a recommended theme setting or custom CSS snippet (e.g., overriding white-space, text-overflow, or line-clamp) to allow 2–3 lines for product titles without causing layout shifts or height inconsistencies among grid items?

I have attached screenshots illustrating the issue.

Looking forward to your support.

Best regards,

Attachments:

You must be logged in to view attached files.

Hello,

You can fix this with the built-in theme options, so no custom CSS is needed for the main fix.

1. Show the full product titles
Navigate to Dashboard -> Theme Settings -> Product archive -> Products loop and set Product title lines limit to None. Product titles will then wrap onto as many lines as needed and won’t be cut off, including the weights like "(850g)" and "(450g)".

2. Keep the product boxes the same height
Go to Dashboard -> Theme Settings -> Product archive -> Products grid and turn on Even product grid for desktop, tablet, and mobile. Product boxes in the same row will then have equal height, and the price and buttons will line up at the bottom even when titles have different lengths.

Optional: limit titles to 3 lines
If you’d rather cap titles at 3 lines than show them in full, set Product title lines limit to two lines. Then add this CSS in Dashboard -> Theme Settings -> Custom CSS -> Global CSS:

[class*="title-line-"] div.wd-product .wd-entities-title { max-height: calc(var(--title-line-count, 1) * var(--title-line-height, 2.4em)); line-height: var(--title-line-height, 1.4em); }

div.title-line-two { --title-line-count: 3; }

If any product sliders or grids on your pages still cut off the titles after these changes, please send us links to those exact pages so we can check them.

Best Regards

[Author]

Posts