Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Component Card using basic Flexbox

Enrique 10

@keeks05

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I had a question in relation to how I positioned the elements in my card; I relied on using the margin property, and I did not feel like that was the best way to go about positioning the elements.

Community feedback

HYDROCODER 555

@HYDROCODER

Posted

Hey there! Good attempt on this challenge. Regarding the positioning, there are a few things I would suggest if you don't mind:

  1. Use more semantic elements in your HTML markup. For example, don't use divs everywhere. Wrap the whole thing in a main tag instead, use section or article tags if you wish but for this challenge I guess it fine with the divs, and for the stats, use ul+li semantics instead of plain divs. That way, you can position them the way you want conveniently and it is more accessible.

  2. You have used fixed height and width for the card. Although the card is small and using such fixed sizes is fine here, I would suggest to not use them. This can cause horizontal scroll issues and can even break multiple elements of your page. You may use percent widths (like 80%, you may toy around it) and a max-width in px (like 800px; you may toy around it), to prevent it from stretching to the entire view port and at the same time have some gap at smaller screen sizes.

  3. You have used margin-top and padding to give gaps between elements. It is commonly used to give gaps and you are fine there, but you can use better units instead of px like rem or em. Just remember this: padding should be used for giving spacing for the content inside the element, and margin is used to give spacing relative to other elements; this is just a general rule to follow and it can be broken at some places.

Hope it helps :).

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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