Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Card component using HTML, CSS, and Flexbox

Tamera 110

@tlbodrick

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


For some reason, the cards resize randomly when changing the window size and I can't figure out why.

Community feedback

Alex Kim 1,325

@alex-kim-dev

Posted

Hey Tamera, the cards resize vertically because the height of their content changes, as you resize the window. It's possible to make them of the same height if we apply align-items: stretch to their flex container, but then we should make some other changes:

/* 750px+ */
.main-component {
  margin: auto;
  display: flex;
  flex-direction: row; /* row is the default value, can remove this */
  justify-content: center; /* doesn't do anything in this case */
  align-items: stretch; /* change center to stretch, it's the default, so we can remove it too */
  max-width: 920px;
}

.main-component {
  margin: 0 1.563em;
  height: 100vh; /* to remove, we want the height of our cards to be auto */
}

The cards are ready, now we need to center the whole component on the screen

body {
  height: 100vh; /* make body full screen */
  display: flex; /* now the .main-component auto centers, because it has margin: auto */
  margin: 0; /* remove the default margin so we don't get vertical scroll */
}

That's it, good luck & have fun on the next challenge!

Marked as helpful

0
darryncodes 6,430

@darryncodes

Posted

Hi Tamera,

Good solution, nice and responsive - well done!

All the best!

Marked as helpful

0
P
Patrick 14,285

@palgramming

Posted

you need to put a controlled height on your card container you currently had 100vh but I put 60vh on it in web dev tools and then one each of your individual cards put a height of 100% on each of them

thank should get you close

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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