Design comparison
Solution retrospective
Any Feedback is Welcome
Community feedback
- @LovelyFaisalPosted about 2 years ago
Hi! You've done great ๐ช
if you want to center the component using flexbox add
height: 100vh;
to the.bigdiv
like this :.bigdiv { display: flex; justify-content: center; align-items: center; height: 100vh; }
and remove
margin-top: 175px;
from.container
If you want to make it a little higher addmargin-bottom: 50px;
to.container
you can learn more about flexbox Here
Marked as helpful0@TK-LS97Posted about 2 years ago@LovelyFaisal Thank you, this will help a lot since I'm new to responsive design and flexbox.
0 - @RamunnoAJPosted about 2 years ago
๐๐ฒ๐ ๐ง๐ผ๐ธ๐ฒ๐น๐ผ! Congratulations on completing this challenge. Your solution is almost done! I have some tips to share with you.
Use the ๐ง๐๐ ๐ฃ๐๐๐ง๐จ๐ฅ๐ ๐ง๐๐ that is a shortcut to deal with the multiple images in this challenge. So you can use the
<picture>
tag instead of importing this as an<img>
or using a div withbackground-image
. Use it to place the images and make the change between mobile and desktop, instead of using adiv
orimg
and set the change in the css withdisplay: none
with the tag picture is more practical and easy. Note that for ๐ฆ๐๐ข / ๐๐ฒ๐ฎ๐ฟ๐ฐ๐ต ๐ฒ๐ป๐ด๐ถ๐ป๐ฒ reasons isnโt a better practice import this product image with CSS since this will make it harder to the image. Manage both images inside the<picture>
tag and use the html to code to set when the images should change setting the devicemax-width
depending of the device ๐ฑ๐ฒ๐๐ธ๐๐ผ๐ฝ + ๐บ๐ผ๐ฏ๐ถ๐น๐ฒ.Check the link for the ๐ผ๐ณ๐ณ๐ถ๐ฐ๐ถ๐ฎ๐น ๐ฑ๐ผ๐ฐ๐๐บ๐ฒ๐ป๐๐ฎ๐๐ถ๐ผ๐ป for
<picture>
in ๐ช๐ฏ ๐ฆ๐๐๐ข๐ข๐๐ฆ: https://www.w3schools.com/tags/tag_picture.aspSee the example below:
<picture> <source media="(max-width:90em)" srcset="./images/image-product-mobile.jpg"> <img src="./images/image-product-mobile.jpg" alt="Gabrielle Parfum"> </picture>
โข The ๐๐น๐ ๐ง๐ฎ๐ด ๐๐ฒ๐๐ฐ๐ฟ๐ถ๐ฝ๐๐ถ๐ผ๐ป for the image needs to be improved upon. You want to describe what the image is; they need to be readable. Assume youโre describing the image to someone.
โข The old price is not being announced properly to screen readers. You want to wrap it in a
<del>
element instead of a<p>
and include a sr-only text explaining that this is the old price.๐จโ๐ปHere's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/responsive-card-component-html-css-sOnpd3gyk0
๐๐ฎ๐ฝ๐ฝ๐ ๐ฐ๐ผ๐ฑ๐ถ๐ป๐ด!
Marked as helpful0@TK-LS97Posted about 2 years ago@RamunnoAJ Thank you so much, this is really helpful, I struggled a lot with the images especially and I'm looking forward to improving this with your suggestions.
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord