Design comparison
Solution retrospective
Hi guys! it was my first time using Tailwind css. once you get it, I find it easier and faster than regular css.
Community feedback
- @hyrongennikePosted about 2 years ago
Hi @guido2288,
Congrats on completing the challenge
You can replace your body rule with the following to center the card on the page.
.bg-Cream { --tw-bg-opacity: 1; background-color: hsl(30 38% 92% / var(--tw-bg-opacity)); display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; } }
Also check the report above there are issue. Hope this is helpful.
Marked as helpful0 - @correlucasPosted about 2 years ago
👾Hello Guido, Congratulations on completing this challenge!
Your solution its almost done and I’ve some tips to help you to improve it:
Using
<picture>
you’ve more control over the elements and its better than using the product image as<img>
orbackground-image
. Look that for SEO and search engine reasons it isn't a better practice to import this product image with CSS since this will make it harder to the image. You can 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 (phone / computer) Here’s a guide about how to usepicture
:https://www.w3schools.com/tags/tag_picture.asp
✌️ I hope this helps you and happy coding!
0
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