xxxxxxxxxx
/* [1] Break words when there is enough space */
h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
overflow-wrap: break-word; /* [1] */
}
/*
[1] Set a maximum width for an image
[2] Let the image cover its bounding box to avoid distortion.
*/
img {
max-width: 100%; /* [1] */
object-fit: cover; /* [2] */
}
xxxxxxxxxx
/*Make sure the image always has object-cover, to avoid it being distorted in case of adding an image with a different aspect ratio.
Have space at the end of the title to avoid it being too close to either the "Add to cart" or the "Sold out!" elements.
Using aspect-ratio to have a consistent image size.*/
.card__thumb {
aspect-ratio: 4/3;
object-fit: cover;
}
.card__title {
padding-right: 1.5rem;
}
/* [1] Break words when there is enough space */
h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
overflow-wrap: break-word; /* [1] */
}
/*
[1] Set a maximum width for an image
[2] Let the image cover its bounding box to avoid distortion.
*/
img {
max-width: 100%; /* [1] */
object-fit: cover; /* [2] */
}