Skip to content
Submitted over 1 year ago

3 column card preview component

Coder852•280
@Coder852
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Your insights would be helpful

Community feedback

  • Davis•330
    @davislocsPosted over 1 year ago

    Hello! Job well done. I only have a couple of suggestions for improvements.

    • For better accessibility, it is better to use tags like <main> and <section>.
    • instead of <div class="wrapper"> use <main class="wrapper">. And for every box is better to use <section class="box box1"> instead of <div class="box box1">.
    • <div class="container"> is not needed here. To make code cleaner, you can center your <main class="wrapper"> by using justify-items: center on <body> selector. And also move max-width: 960px property on <main class="wrapper">. So you can totally delete <div class="container">.
    • I also suggest using rem units instead px.

    Watch this video about CSS units.

    I hope this is helpful. Happy coding! :)

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

    Replace <div class="container"> with the main tag and the content must have <h1> to fix the accessibility issues. click here for more on web-accessibility and semantic html

    In the media query reduce the max-width value of .container

    To center .container on the page using flexbox only instead flexbox with a margin, add justify-content: center to the body and remove the margin value in .container.

    Hope am helpful.

    Well done for completing this challenge. HAPPY CODING

    Marked as helpful
    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