@Islandstone89
Posted
HTML:
-
You don't need to include words like "picture" or "image" in the alt text, as screen readers read that by default.
-
As the card heading would likely not be the main heading on a page, I would change it to a
<h2>
. -
To make it clearer for screen readers that the second price is the old price, I would add a
<span>
with a "visually-hidden" class:<p class="old-price"><span class="visually-hidden">Old price: </span>$169.99</p>
. Then, apply the following styles to make "Old price" visible for screen readers only:
.visually-hidden {
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
This article explains what each of the properties does.
CSS:
-
Including a CSS Reset at the top is good practice.
-
To center the card horizontally and vertically, with space between the main and the footer, I would use Flexbox on the body:
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100svh;
gap: 2rem;
-
When
padding-left
andpadding-right
have the same value, you can use the shorthand:padding-inline: 2rem;
. -
You must remove the
max-height
on the card - never limit elements containing text! The currentmax-height: 70vh
cuts off the card just underneath the prices - always let the content, including margin and padding, determine the height. -
Do also remove
height: 100vh
on the card. -
max-width
on the card should be in rem instead of%
- around50rem
works fine. -
On smaller screens the "Add to cart" button touches the edge of the card - add some
padding
ormargin
to create breathing room. -
font-size
on.attribution
must also be inrem
. -
letter-spacing
must not be inpx
. You can useem
, where1em
equals the element's font size.
Marked as helpful