@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