Submitted over 1 year ago

product preview card component

Brian Ndickers• 190

@ndickers

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Community feedback

Loai Esam• 670

@LoaiEsam37

Posted 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

Brian Ndickers• 190

@ndickers

Posted 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.

Brian Ndickers• 190

@ndickers

Posted over 1 year ago

Okay. Let me check on that. Thank you

Hassia Issah• 50,670

@Hassiai

Posted 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

Please log in to post a comment

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