diff --git a/src/components/cards/card.css b/src/components/cards/card.css index 265ca22d1527f3c460e9e7724177eac0c33cf7fc..ad712e3399ddaea348c5e37e9ad1c3a6ee5cce6d 100644 --- a/src/components/cards/card.css +++ b/src/components/cards/card.css @@ -170,6 +170,9 @@ align-items: center; position: relative; text-align: center; + + /* Min height prevents layout changing when images change */ + min-height: 256px; } .step-video { diff --git a/src/components/cards/cards.jsx b/src/components/cards/cards.jsx index 9bb147f130f4c1f74e2d91bff34bc3a80c949f07..66c9e91e347448147f2bec316e1acc009fc556d2 100644 --- a/src/components/cards/cards.jsx +++ b/src/components/cards/cards.jsx @@ -155,6 +155,7 @@ const ImageStep = ({title, image}) => ( <img className={styles.stepImage} draggable={false} + key={image} /* Use src as key to prevent hanging around on slow connections */ src={image} /> </div>