Profile Card with HTML, CSS & Flexbox

Solution retrospective
A bit harder than expected. I have some issues with the background images, I don't know how to "fix" it because this way it follows the screen and with the mobile view it's not good.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @pikapikamart
Hey, awesome work on this one. The overall layout I think looks great. To be honest, I don't mind the 2 background-blob-images to not be on the exact spot like on the design^
tom already gave a feedback on this one, just going to add some suggestions as well:
- Avoid using
height: 100%
orheight: 100vh
on a large container like thebody
as this makes the element's height capped based on the viewport/screen's height. Instead usemin-height: 100vh
so that the element will expand if it needs to. - On your
main
tag, replace thewidth: 340px
intomax-width: 340px
so that it won't have a fixedwidth
and usewidth: 100%
. - For the person's image, typically, when you want to center an element, you would use
margin: 0 auto
, so instead ofmargin: 0 115px 15px;
usemargin: 0 auto 15px
and add adisplay: block
on it so that it will be adjusted. - Avoid using
id
to target and style an element since it is a bad practice due to css specificity. Instead, just useclass
to target element. - For each of the
.stats
text-content, those number-text like80k
aren't really heading tags because by making it one, it doesn't really give any information on what the section would contain. Ap
tag replacement would be nice. - Also, if you look at the
.stats
content, you can see that those are "list" of information right. It would be nice to use eitherul
ordl
on this one, but I prefer to usedl
on this. The markup looks like:
<dl> <div> <dt>Follower</dt> <dd>80k</dd> </div> </dl>
You would need to have 3 div since there are 3 items in there and yes, you can use
div
inside of adl
tag but not on other list tags. On eachdiv
, you can use :div { display: flex; flex-direction: column-reverse; }
So that the placement will be reversed. Remember to each use the text like
followers, likes
as thedt
.Aside from those, great job again on this one.
Marked as helpful - Avoid using
- @tomsky90
Hi. Nice work. I would try to create a container like a page wrapper then add img in your HTML and then try to use position absolute. Hopefully that will work. :)
Marked as helpful
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