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

Lazy man trying to make a card component (Failed in the attempt)

srjavih3 30

@srjavih3

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P
Dean 480

@Deanogit

Posted

Hi @srjavih3,

Great effort so far with your submission

I noticed a couple of things that you might find interesting.

It is not common practice to declare height and width properties in your CSS file on both the html and body element selectors, but you're right to declare them on the body.

You've done a great job using the * selector to reset the browser defaults on box-sizing: border-box, it's possible to place margin: 0; and padding: 0 in there too instead of being in the body selector.

I hope this helps

Above all, well done, great work and keep going

0

@javascriptor1

Posted

Setting height 100% on body tag only without setting same prop on html root tag would not work if you want to have 100vh effect.

Both html and body tag should have 100% height prop in order to have viewport height of 100%.

Other option is to give body tag only100vh instead of 100% - It will work in this case

1
P
Dean 480

@Deanogit

Posted

@javascriptor1 Thanks for clarifying, I thought it wasn't best practice to define height on the html, this article looks into it and explains it better than I understand it 🙃 here

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