cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

make the images bigger

Browse Source
This commit is contained in:
Franco Arza 2020-10-26 21:52:36 -03:00
parent 0478b43e9c
commit 115f076fda
2 changed files with 22 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -123,10 +123,16 @@
@apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-primary font-semibold text-xs leading-6 cursor-pointer; @apply w-10 h-10 flex ml-auto items-center justify-center bg-primary text-primary font-semibold text-xs leading-6 cursor-pointer;
} }
.product-image { .imageContainer {
margin: auto; & > div {
& > div {
& div { height: 100%;
margin: auto; margin: 0 auto;
}
} }
} }
.product-image {
height: 120% !important;
top: -10% !important;
}

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

@ -70,15 +70,17 @@ const ProductCard: FC<Props> = ({
variant={p.variants.edges?.[0]!} variant={p.variants.edges?.[0]!}
/> />
</div> </div>
<EnhancedImage <div className={s.imageContainer}>
alt={p.name} <EnhancedImage
className={cn('w-full object-cover', s['product-image'])} alt={p.name}
src={src} className={cn('w-full object-cover', s['product-image'])}
width={imgWidth} src={src}
height={imgHeight} width={imgWidth}
priority={priority} height={imgHeight}
quality="90" priority={priority}
/> quality="90"
/>
</div>
</a> </a>
</Link> </Link>
) )