refactor: Update image sizes for HeroBanner and ProductCard components

beljp · Aug 19, 2024 · 91bc401 · 91bc401
1 parent fa39209
commit 91bc401
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/woonuxt_base/app/components/generalElements/HeroBanner.vue b/woonuxt_base/app/components/generalElements/HeroBanner.vue
@@ -7,12 +7,12 @@
       src="/images/hero-4.jpg"
       alt="Hero image"
       loading="eager"
-      sizes="sm:50vw md:1400px"
+      sizes="sm:100vw md:1400px"
       fetchpriority="high"
       preload
       placeholder
       placeholder-class="blur-xl" />
-    <div class="container absolute inset-0 flex flex-col items-start justify-center bg-gradient-to-l from-gray-200 md:bg-none p-8">
+    <div class="container absolute inset-0 flex flex-col items-start justify-center bg-gradient-to-l from-gray-200 md:bg-none">
       <h1 class="text-3xl font-bold md:mb-4 md:text-4xl lg:text-6xl">Just landed.</h1>
       <h2 class="text-lg font-bold md:mb-4 lg:text-3xl">The New Year Collection</h2>
       <div class="max-w-sm mb-8 text-md font-light lg:max-w-md text-balance">

diff --git a/woonuxt_base/app/components/productElements/ProductCard.vue b/woonuxt_base/app/components/productElements/ProductCard.vue
@@ -48,6 +48,7 @@ const imagetoDisplay = computed<string>(() => {
         :alt="node.image?.altText || node.name || 'Product image'"
         :title="node.image?.title || node.name"
         :loading="index <= 3 ? 'eager' : 'lazy'"
+        :sizes="`sm:${imgWidth / 2}px md:${imgWidth}px`"
         placeholder
         placeholder-class="blur-xl" />
     </NuxtLink>