Skip to content
Submitted over 1 year ago

product-preview-card-component-main

Aya•150
@aya-94
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Luka Glonti•3,440
    @lack21Posted over 1 year ago

    Fantastic work 👍, but I have some recommendations!

    • Remove width: 100vw from the body, body is a block level element which by default takes full width available, so width: 100vw does nothing here!

    • Replace height: 100vh to min-height: 100vh in the body, the difference is that, when you set height: 100vh to something, that means it won't be bigger than that, it might cause some problems in the future, so better approach is to set min-height: 100vh, like this in case content is overflowing container will adjust to it!

    Marked as helpful
    2
    Aya•150
    @aya-94Posted over 1 year ago

    @lack21 Thank for you comment! I've changed that plus increased the heading text and had to apply the font family to the button as I just realised it didn't apply. Image is showing in different colours, I don't know why or if I need to change it, and I got the system review telling me - 'Page should contain a level-one heading', but I have <html lang="en"> in my code that actually they provided, is it weird or is it me? Thank you again!

    0
    Luka Glonti•3,440
    @lack21Posted over 1 year ago

    @aya-94 Level one heading is h1, which improves user experience by allowing readers to learn what your page is about at a glance!

    Just change h2 to h1 and it's going to be fixed!

    0

Please log in to post a comment

Log in with GitHub

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