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

Frontmentor-product-preview-card-component-main(HTML /CSS)

Maryam Ali 220

@Maryamhussein

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What did you find difficult while building the project? -little bit Which areas of your code are you unsure of? -the responsive Do you have any questions about best practices? why do sometimes we should put 100vh when we center the body content?

Community feedback

Nick 160

@HarmoniaCodes

Posted

Hi Maryam! Congrats on completing the challenge! I have a few pieces of feedback:

-When your site goes to the mobile layout, your .image class is stretching and creating a lot of whitespace. You might try modifying the .main height from 100% to avoid the excess whitespace.

-To answer the question about 100vh; This means viewport height:100%, or that the element height will take up 100% of the page window height. This helps give a value for things to be centered vertically, whereas margin:auto 0; can used for horizontal centering.

I hope this is helpful! You are doing great work!

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