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

profile card with html , css mobile and desktopversion

Ranjana Mukhiaβ€’ 150

@ranjanamukhia

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 want the feedback on following things:- 1.Please let me know what can be done to make it responsive as iam not sure how the white card having blue-background and persons photo should come up in smaller screen size than 340px.

Community feedback

P
Dave Quahβ€’ 670

@Milleus

Posted

Hi @ranjanamukhia πŸ‘‹

Congrats on completing the challenge πŸŽ‰

To your question on how to fix accessibility issues:

  • The page needs a level-one heading, meaning it needs a <h1> element. More information here. If the existing design does not have an appropriate text to be a h1, you can add your own h1 title and make it visibly hidden but still picked up by screen readers.

  • The <div class="attribution"> needs to be within a landmark, landmark refers to elements such as <header>, <nav>, <main>, <footer>. There are several ways to fix this, either move the <div> into the <main>, wrap it within a <footer>, or changing the <div> to a <footer> since it makes sense in this case. More information here.

Hope this helps, happy coding!

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