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

Stats preview card component

leverh 300

@leverh

Desktop design screenshot for the Stats preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Fixed solution. Please note the git repository url is for old version. Could not update new files onto git as hard as i tried... The live site URL however is the correct version.

Community feedback

Hana 870

@Hanka8

Posted

Hi leverh, nice job!

You wrongly placed the end of the </div> in your html (you meant it under the attribution?) - I think its the root of your problems.

I would place the attribution outside of the main section, and create a separate footer containing it. Then, you should remove "display: flex" and "align-items:center" from the body tag and place them in the .main tag. This way your footer will appear at the end at all screen-sizes and will be not affected by the flexbox.

Also, you should remove .card {"margin-top: 18rem"} and .main {"height:100vh} from your media (this crops your content only on the height of mobile screen).

Suggestions for accesibility:

• instead of <section class="main>, use just <main> tag;

Hope this helps!

0

leverh 300

@leverh

Posted

@Hanka8 Thank you very much for your tips. I fixed it! :)

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