crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 20:26:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix overlaping product titles on mobile

Browse Source 
Add an `extra-loose` line-height so it prevents
produt title to overlap on mobile screens.
This commit is contained in:
Willian Justen de Vasconcellos
2020-10-27 17:56:59 -03:00
parent a590093f09
commit 48e35c9163
3 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/product/ProductCard/ProductCard.module.css
View File

@@ -101,7 +101,7 @@
}
.productTitle {
@apply pt-2 max-w-full w-full;
@apply max-w-full w-full;
font-size: 2rem;
letter-spacing: 0.4px;

2
components/product/ProductCard/ProductCard.tsx
View File

@@ -57,7 +57,7 @@ const ProductCard: FC<Props> = ({
<div className={s.squareBg} />
<div className="flex flex-row justify-between box-border w-full z-20 absolute">
<div className="absolute top-0 left-0 pr-16 max-w-full">
<h3 className={s.productTitle}>
<h3 className={cn('leading-extra-loose pt-0 sm:pt-2 sm:leading-normal', s['productTitle'])}>
<span>{p.name}</span>
</h3>
<span className={s.productPrice}>{price}</span>