Josh• 320
@Ao-chi
Posted
Hi~ Congrats on finishing this challenge!
Some tips to make it better for both mobile and desktop versions.
- For the
<html>and<body>elements, you could give it aheight: 100%. - To keep the card component always on center you can get rid of your widths and heights in your
.wrapperclass like this:
.wrapper {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: var(--Cream);
background-color: var(--Cream);
}
@media only screen and (min-width: 768px) {
.wrapper {
flex-direction: row;
}
}
For accessibility and usability here are some tips.
- You can change your
<div class="wrapper">to<main class="wrapper". It will help screen readers and other assistive technologies understand the **structure and hierarchy ** of the content on the page. - Also you can replace
<div>with headings such as<h1>to give emphasis on the main topic of the content. You could do this to your.previewclass, like this"<h1 class="preview">Gabrielle Essence Eau De Parfum</h1> - For the Add to Cart you can remove the
<h1>element to and just wrap the icon and the text inside a<button>like this:
<div class="add-to-cart">
<svg width="15" height="16" xmlns="http://www.w3.org/2000/svg">
<path d="M14.383 10.388a2.397 2.397 0 0 0-1.518-2.222l1.494-5.593a.8.8 0 0 0-.144-.695.8.8 0 0 0-.631-.28H2.637L2.373.591A.8.8 0 0 0 1.598 0H0v1.598h.983l1.982 7.4a.8.8 0 0 0 .799.59h8.222a.8.8 0 0 1 0 1.599H1.598a.8.8 0 1 0 0 1.598h.943a2.397 2.397 0 1 0 4.507 0h1.885a2.397 2.397 0 1 0 4.331-.376 2.397 2.397 0 0 0 1.12-2.021ZM11.26 7.99H4.395L3.068 3.196h9.477L11.26 7.991Zm-6.465 6.392a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Zm6.393 0a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Z" fill="#FFF"></path>
</svg>
Add to Cart
</div>
That's all! If you have anymore questions fell free to contact me. Happy Coding~
Marked as helpful
1
