787548 - [redesign] Topics and Product "cards" height issue

Status: RESOLVED FIXED

(support.mozilla.org :: Knowledge Base Software, task, P1)

Description

[Ricky Rosario [:rrosario, :r1cky]]

Attachment: product and topic cards

The mockups have nice short text for topics and product descriptions. Our real world data isn't as tight. See attachements. What to do?

Bram, assigning to you for guidance.

1pter as this is some basic css/less.

Comment 1

[Bram Pitoyo [:bram]]

For the product cards:

#product-cards .logo-sprite {
	margin: 8px 15px 8px 0px /* reduce margin-right by 5px */
}

#product-cards .title {
	margin: 0px 0px 12px 99px /* reduce margin-left by 5px */
	letter-spacing: -1px /* give it a -1 letter spacing */
}

Under this setup, if a product has two-line title, it can have two lines of description. If a product has one-line title, it can have three lines of descriptions.



For the topics cards:

.card-grid > li > a {
	padding: 20px 15px; /* reduce padding-left and padding-right by 5px.  */
}

#help-topics .card-grid > li > a .title, #help-topics .card-grid > li > a:visited .title {
    margin-left: 81px; /* reduce margin-left by 5px */
}

.grid_9 #help-topics .card-grid > li > a .title, .grid_9 #help-topics .card-grid > li > a:visited .title {
    line-height: 1.25; /* reduce line-height down from 1.5 */
    font-family: 'OpenSans'; /* thicken font to Open Sans Regular */
}


These solved the spacing issues for me.

Comment 2

[Ricky Rosario [:rrosario, :r1cky]]

Thanks Bram! I'll try it out.

Comment 3

[Ricky Rosario [:rrosario, :r1cky]]

That worked! Just landed in prod:

https://github.com/mozilla/kitsune/commit/5c5990a3b5a9fa23b16d6e5d1c1cba002733adff