Breaking News: Grepper is joining You.com. Read the official announcement!

defensive css

Angella McConnell answered on September 18, 2022 Popularity 3/10 Helpfulness 1/10

answer defensive css

related defensive css

defensive css

Comment

/* [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] */
}

Popularity 3/10 Helpfulness 1/10 Language css

Source: defensivecss.dev

Tags: css

Link to this answer
Share Copy Link

Contributed on Aug 03 2023

Angella McConnell

0 Answers Avg Quality 2/10

Closely Related Answers

defensive css

Comment

/*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] */
}

Popularity 5/10 Helpfulness 2/10 Language css

Source: defensivecss.dev

Tags: css

Link to this answer
Share Copy Link

Contributed on Sep 18 2022

Elegant Elephant

0 Answers Avg Quality 2/10

defensive css

Contents

More Related Answers

defensive css

Closely Related Answers

defensive css

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.