mirror of
https://github.com/vercel/commerce.git
synced 2025-03-14 22:42:33 +00:00
Fix overlaping product titles on mobile
Add an `extra-loose` line-height so it prevents produt title to overlap on mobile screens.
This commit is contained in:
parent
a590093f09
commit
48e35c9163
@ -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;
|
||||
|
||||
|
@ -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>
|
||||
|
@ -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')],
|
||||
|
Loading…
x
Reference in New Issue
Block a user