diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx index 8a1aaaa94..12db7c705 100644 --- a/components/product/ProductCard/ProductCard.tsx +++ b/components/product/ProductCard/ProductCard.tsx @@ -14,6 +14,7 @@ interface Props { imgWidth: number | string imgHeight: number | string priority?: boolean + imgLayout?: 'fixed' | 'intrinsic' | 'responsive' | undefined } const ProductCard: FC = ({ @@ -22,6 +23,7 @@ const ProductCard: FC = ({ variant, imgWidth, imgHeight, + imgLayout = 'responsive', priority, }) => { const src = p.images.edges?.[0]?.node?.urlOriginal! @@ -50,6 +52,7 @@ const ProductCard: FC = ({ height={imgHeight} priority={priority} quality="85" + layout={imgLayout} /> ) : ( diff --git a/components/ui/Marquee/Marquee.module.css b/components/ui/Marquee/Marquee.module.css index ab891456d..32601a54e 100644 --- a/components/ui/Marquee/Marquee.module.css +++ b/components/ui/Marquee/Marquee.module.css @@ -8,7 +8,7 @@ & > * { @apply flex-1 px-16 py-4; - width: 450px; + width: 430px; } } diff --git a/next.config.js b/next.config.js index 080dd8066..ba82fafa3 100644 --- a/next.config.js +++ b/next.config.js @@ -1,6 +1,6 @@ module.exports = { images: { - sizes: [320, 480, 820, 1200, 1600], + imagesSizes: [320, 480, 820, 1200, 1600], domains: ['cdn11.bigcommerce.com'], }, i18n: { diff --git a/pages/index.tsx b/pages/index.tsx index 6d5323c94..de29f6e75 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -97,6 +97,7 @@ export default function Home({ variant="slim" imgWidth={320} imgHeight={320} + imgLayout="fixed" /> ))} @@ -129,6 +130,7 @@ export default function Home({ variant="slim" imgWidth={320} imgHeight={320} + imgLayout="fixed" /> ))}