Skip to content
Submitted almost 2 years ago

Frontend Mentor | Product preview card component

Mads Gregersen•30
@ByProxy66
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

Solution retrospective

Just testing. Not smart enough to have any good questions yet.

Community feedback

  • Saulius K.•560
    @TH3RIVPosted almost 2 years ago

    Hi, @ByProxy66! To me it looks pretty good.

    The main issue I have with your project is that it does not contain landmarks (header, main, footer). Pretty sure a page content has to be wrapped in <main></main> landmark for it to recognise what is the main content of the page.

    Therefore I would suggest doing the following:

    • Wrap your card within main landmarks.
    • Wrap your attribution within footer landmarks.

    Hope this helps!

    Marked as helpful
    2
    Mads Gregersen•30
    @ByProxy66Posted almost 2 years ago

    @TH3RIV Thank you. I absolutely 'forgot' that and I have to confess, that I need to do some reading up on landmarks. I wrapped the content, rather than the divs. I don't know if that's correct.

    0
    Saulius K.•560
    @TH3RIVPosted almost 2 years ago

    @ByProxy66 Your whole card should be wrapped within main tags.

    <body>
<main>
Main Content (Card)
</main>
<footer>
Footer Content (Attribution)
</footer>
</body>
    1
  • VincenzoMuolo•180
    @VincenzoMuoloPosted almost 2 years ago

    Hi there!

    The layout works great! The only thing i would suggest you is to shrink a bit the card on mobile layout, maybe by adding some padding / margin on left and right side.

    Hope this give you some help!

    Cheers

    Marked as helpful
    1
    Mads Gregersen•30
    @ByProxy66Posted almost 2 years ago

    @Shirohige-96 Thanks. I added some padding.

    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