Various fixes

juanpprieto · Nov 30, 2023 · 986620e · 986620e
1 parent cdeff03
commit 986620e
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 5 deletions.
diff --git a/app/root.tsx b/app/root.tsx
@@ -119,6 +119,7 @@ export default function App() {
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <Meta />
         <Links />
+        {/* Include css-hook styles */}
         <style id="css-hooks" dangerouslySetInnerHTML={{__html: css}} />
       </head>
       <body
@@ -158,6 +159,8 @@ export function ErrorBoundary() {
         <meta name="viewport" content="width=device-width,initial-scale=1" />
         <Meta />
         <Links />
+        {/* Include css-hook styles */}
+        <style id="css-hooks" dangerouslySetInnerHTML={{__html: css}} />
       </head>
       <body>
         <Layout {...rootData}>

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -97,10 +97,10 @@ function RecommendedProducts({
                 <Link key={product.id} to={`/products/${product.handle}`}>
                   <Image
                     data={product.images.nodes[0]}
-                    aspectRatio="1/1"
+                    aspectRatio="800/450"
                     sizes="(min-width: 45em) 20vw, 50vw"
                     style={hooks({
-                      height: '100%',
+                      height: 'auto',
                     })}
                   />
                   <h4>{product.title}</h4>

diff --git a/app/routes/collections.$handle.tsx b/app/routes/collections.$handle.tsx
@@ -110,7 +110,7 @@ function ProductItem({
       {product.featuredImage && (
         <Image
           alt={product.featuredImage.altText || product.title}
-          aspectRatio="1/1"
+          aspectRatio="800/450"
           data={product.featuredImage}
           loading={loading}
           sizes="(min-width: 45em) 400px, 100vw"

diff --git a/app/routes/collections._index.tsx b/app/routes/collections._index.tsx
@@ -77,7 +77,7 @@ function CollectionItem({
       {collection?.image && (
         <Image
           alt={collection.image.altText || collection.title}
-          aspectRatio="1/1"
+          aspectRatio="800/450"
           data={collection.image}
           loading={index < 3 ? 'eager' : undefined}
           style={hooks({height: 'auto'})}

diff --git a/app/routes/products.$handle.tsx b/app/routes/products.$handle.tsx
@@ -145,7 +145,7 @@ function ProductImage({image}: {image: ProductVariantFragment['image']}) {
     <div>
       <Image
         alt={image.altText || 'Product Image'}
-        aspectRatio="1/1"
+        aspectRatio="800/450"
         data={image}
         key={image.id}
         sizes="(min-width: 45em) 50vw, 100vw"