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

product preview card using flexbox

P

@Sasa-Tausan

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

Account Deleted

Hello @Sale1982 😊

Your solution is great✨ and congratulations for successfully completing a newbie challenge🎉

and there is a small suggestion that might be helpful for you

  • min-height :

You can use min-height instead of height

because height will put your element to a size of 100% of it's container. min-height will put the element to min 100% of the container size.

if we set min-height: 100vh then the main will start at 100vh, if the content pushes the main beyond 100vh it will continue growing. However if you have content that takes less than 100vh it will still take 100vh in space

and it will helpful when you make responsive solutions

  • <main> landmark :

The main role is a navigational landmark role identifying the main content of a document. Landmarks can be used by assistive technology such as screen readers to quickly identify and navigate to large sections of the document.

you can use <main> to wrap your page all content like :

<main>
''' your page content '''
</main>

For more info check this link

Hope that was helpful 😊

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