Submitted almost 2 years ago

Responsive Card Design HTML and CSS

Eray• 70

@eraybel

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Stats preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I may have deficiencies in the design I have made. I have just started sensitive design, if you let me know about our shortcomings, I can work on them.

Community feedback

Hassia Issah• 50,670

@Hassiai

Posted almost 2 years ago

Replace <div class="container"> with the main tag, replace <h2><h3> with <p> and <div class="attribution"> with the footer tag to fix the accessibility issues. for more on semantic html visit https://web.dev/learn/html/semantic-html/

There is no need to give the html and the body height: 100%; To center .container on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body.

Hope am helpful HAPPY CODING

Marked as helpful

Favour• 2,140

@Nadine-Green

Posted almost 2 years ago

HEY ERAY!

I see that you have an issue with centering, a quick fix for this would be the give the body a height of 100vh height:100vh then a display of grid display: grid and then using the code place-items: center

HOPE I COULD BE OF HELP :)

HAPPY CODING!

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