crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-03-14 22:42:33 +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
Show Stats 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>

3
tailwind.config.js
View File

@ -46,6 +46,9 @@ module.exports = {
magical:
'rgba(0, 0, 0, 0.02) 0px 30px 30px, rgba(0, 0, 0, 0.03) 0px 0px 8px, rgba(0, 0, 0, 0.05) 0px 1px 0px',
},
lineHeight: {
'extra-loose': '2.3'
}
},
},
plugins: [require('@tailwindcss/ui')],