Problem: Some coupon descriptions can get super long and since on mobile we’re using a horizontal scrolling, it can lead to a weird effect where one div has a lot of text so it’s vertically super tall compared to the rest of the coupons that have normal length descriptions.

Solution: Based on coupon description length (aka character count), visually we’ll cut off the extra lines by using a fixed height and hide the overflow of content. This way every coupon div is of same height and looks more cohesive. However, since the descriptions for coupons do matter, we add a “more” button when the description is truncated so that the user can click to read all the description if they wanted to. But for most of the users, they only care about the coupon code which is always visible.

Coupon description truncated by default

Coupon description when expanded