
Solution retrospective
I would try to use tailwind css
What challenges did you encounter, and how did you overcome them?I tried to use tailwind css but it wasn't working so i just went back to normal css
What specific areas of your project would you like help with?I would like some css tips
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Blackpachamame
Greetings! you have done a great job 😎
📌 Some suggestions
- I recommend doing a small
reset
to the styles that come by default in the browsers. To do this, you can apply a couple of properties to the universal selector*
, with this you will make your site look the same in all browsers - I leave you the task of researching the
reset CSS
and thebox-sizing: border-box
- If you didn't apply the reset, you can add
margin: 0
to yourbody
, this will remove annoying scrolling on large screens. If you want to maintain separation on very small screens, you can apply themargin
again using media querys - You can apply
display: block
to the image to remove the white space generated underneath. Although visually in this case it is irrelevant, it helps you better calculate the space with other elements - Apply
width: 100%
to yourimg
so that it occupies the correct width within the container - For your
<p>Published 21 Dec 2023</p>
you can use thetime
tag:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>
. More info - Add a
padding
to generate interior space on your card. This prevents you from usingmargin
orpadding
on child elements to achieve the same result - Here I leave my solution for you to take a look at
Marked as helpful - I recommend doing a small
- @Jonnynavi
I think everything is used very well. It's pretty much a perfect copy of the original.
Join 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