cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests 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 { .productTitle {
@apply pt-2 max-w-full w-full; @apply max-w-full w-full;
font-size: 2rem; font-size: 2rem;
letter-spacing: 0.4px; 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={s.squareBg} />
<div className="flex flex-row justify-between box-border w-full z-20 absolute"> <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"> <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> <span>{p.name}</span>
</h3> </h3>
<span className={s.productPrice}>{price}</span> <span className={s.productPrice}>{price}</span>

3
tailwind.config.js
View File

@ -46,6 +46,9 @@ module.exports = {
magical: 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', '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')], plugins: [require('@tailwindcss/ui')],