Fix product feed image layout shift

Cmastris · Nov 21, 2023 · d723c15 · d723c15
1 parent 1822435
commit d723c15
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/front-end/src/App/utilStyles.module.css b/front-end/src/App/utilStyles.module.css
@@ -128,10 +128,6 @@
  margin-bottom: 0.8em;
 }
 
-.image {
- max-width: 100%;
-}
-
 
 /* ===== Font Size & Weight ===== */
 

diff --git a/front-end/src/features/products/ProductFeedItem.js b/front-end/src/features/products/ProductFeedItem.js
@@ -16,7 +16,13 @@ export default function ProductFeedItem({ productData }) {
  return (
  <article className={styles.feedItem}>
  <Link to={detailPath}>
- <img src={imagePath} alt={productData.name} className={`${utilStyles.image} ${styles.image}`}></img>
+ <img
+ src={imagePath}
+ alt={productData.name}
+ height="500"
+ width="500"
+ className={styles.image}
+ ></img>
  </Link>
  <div className={styles.textContainer}>
  <div className={utilStyles.mb1rem}>

diff --git a/front-end/src/features/products/ProductFeedItem.module.css b/front-end/src/features/products/ProductFeedItem.module.css
@@ -3,11 +3,16 @@
 }
 
 .image {
- border-bottom: 1px solid rgb(240, 240, 240);
+ /* https://web.dev/articles/aspect-ratio#example_preventing_layout_shift */
+ width: 100%;
+ height: auto;
+ max-width: 550px;
+ aspect-ratio: 1 / 1;
 }
 
 .textContainer {
  padding: 0.8em 6% 1.4em 6%;
+ border-top: 1px solid rgb(240, 240, 240);
  color: rgb(15, 17, 17);
 }