@correlucas
Posted
๐พHi @Hibiscuit0, congratulations on your first solution!๐ Welcome to the Frontend Mentor Coding Community!
Great solution and a great start! From what I saw youโre on the right track. Iโve few suggestions for you that you can consider adding to your code:
1.Use <main>
instead of <div>
to wrap the card container. This way you show that this is the main block of content and also replace the div with a semantic tag.
2.Clean your code by removing some unnecessary divs, most of the content can stand alone without a div. Use div only for blocks that need a special alignment or the content needs a special positioning.
3.Add a margin of around margin: 20px
to avoid the card touching the screen edges while it scales down.
4.Fix the component responsiveness, its not working yet and this is due the fixed width
you've applied to the container. The difference between width
and max-width
is that the first(width) is fixed and the second(max-width) is flexible
and make the element shrink when the screen starts to scale down. So if you want a responsive block element, never use width
choose or min-width
or max-width
.
โ๏ธ I hope this helps you and happy coding!
Marked as helpful