Skip to content
Submitted over 1 year ago

product preview card component

Brian Ndickers•190
@ndickers
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

  • Loai Esam•670
    @LoaiEsam37Posted over 1 year ago

    to center your card in the middle of the screen you can add these porperties to your <body>

    body {
    display: flex;
    justify-content: center;
    align-items: center
}

    put your section tag inside a main tag so that it becomes easier for screen readers to know where is the main content and you can also use something like <nav> , <footer> and <sidebar> tags for the same reason

    1
    Brian Ndickers•190
    @ndickersPosted over 1 year ago

    @LoaiEsam37 Thank you for the code review. I'll update. Though it was a design for a preview card, which is a section of a website and i see no need to include nav, footers and headers.

    1
  • Brian Ndickers•190
    @ndickersPosted over 1 year ago

    Okay. Let me check on that. Thank you

    0
  • Hassia Issah•50,650
    @HassiaiPosted over 1 year ago

    Replace <section> with the main tag, <h1> with<p> and <h2> with <h1> to fix the accessibility issue. click here for more on web-accessibility and semantic html

    To center the section/main on the page using flexbox or grid instead of margin, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

    USING FLEXBOX:
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

    USING GRID:
body{
min-height: 100vh;
display: grid;
place-items: center;
}

    For a responsive content give the section/main a fixed max-width value. max-width:500px.

    Hope am helpful.

    Well done for completing this challenge. HAPPY CODING

    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