Submitted about 2 years ago

Profile card component using CSS grid

#cube-css#accessibility

Dave Quah• 670

@Milleus

Preview site View code

This is a solution for...

Profile card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

This one's tricky with the image centering but I think I've found a nice way to always have the image centered even with larger heights or font sizes using CSS grid.

I'd appreciate it if I could get feedback on how to improve, especially on the use of semantic HTML and accessibility considerations. Thanks everyone o/

Community feedback

LiBee• 390

@Li-Bee

Posted about 2 years ago

Well done on the design. I think you need to add sr-only class to you <h1> element. As the title Profile Card Component is showing on the screen.

Dave Quah• 670

@Milleus

Posted about 2 years ago

@Li-Bee thanks for your feedback. I was contemplating if it should be shown or hidden and figured I'll leave it as it is 😂 Let me hide it with sr-only to be more consistent with the design.

Please log in to post a comment

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