Skip to content
Submitted about 1 year ago

"3 column preview card component" using Grid and Flexbox.

Saif Shalan•190
@SafeNSound95
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

I'd love for someone to check my responsive design and give me feedback on it. also please check my media queries in the code as I'm unsure if the max-width values I gave inside the queries are optimal.

a question about best practices would be about giving the body a background-color is that fine?

Community feedback

  • hitmorecode•6,680
    @hitmorecodePosted about 1 year ago

    Nice well done. Just a few tips

    body {
  background-color: hsl(0, 0%, 95%);
  font-family: "Lexend Deca", sans-serif;
  line-height: 1; /* you don't need to have this on the body, you can remove it */
/* add these lines to place the card in the middle of the page */
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.preview-card-container {
  display: grid;
  max-width: 92rem;
  grid-template-columns: repeat(3, 1fr);
  /* margin: 10rem auto; */ /* remove this line, it's no necessary, because grid on the body is doing this */
}
    Marked as helpful
    1
    Saif Shalan•190
    @SafeNSound95Posted about 1 year ago

    @hitmorecode thanks for the feedback, I removed the line-height line and it's indeed better without it.

    but for the min-height: 100vh, I've been trying to do this for the past two challenges but it breaks the components. I've tried both min-height:100vh, and setting height: 100% to container, body, and html. but both solutions break the layout even though they're recommended all across the internet.

    basically when I set min-height:100vh and then open up dev tools for example, the layout gets pushed till it reaches the top and is no longer centered. I don't know if it's a problem with the rest of the code, of if the layout getting pushed around with min-height is normal, but that's why I steered away from setting the height so far.

    0
    hitmorecode•6,680
    @hitmorecodePosted about 1 year ago

    @SafeNSound95 I don't recognize this problem, may you add some margins that are causing this problem. Normally when this kind of problems occur is mostly due to margins.

    You can try this to see it for your self

      <body>
    <main>
      <div class="box-container">
        <div class="box red"></div>
        <div class="box green"></div>
        <div class="box blue"></div>
      </div>
    </main>
  </body>

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

.box-container {
  display: flex;
}

.box {
  width: 300px;
  height: 300px;
}

.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

    Play with min-height.

    The reason for min-height is to make a page responsive. While you keep adding content to the page, the page will grow accordingly

    Marked as helpful
    1
    Saif Shalan•190
    @SafeNSound95Posted about 1 year ago

    @hitmorecode thankful for your help, I applied the changes.

    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