my solution 3-column preview card component

Hi @Blackysynch,

Congratulation for successfully completing the challenge, nicely done...

There could be several reasons when you reduce element, a child component is appearing outside of its parent's height:

• Positioning; If the child component is positioned absolutely or fixed, it will be taken out of the normal flow of the document and may not respect the height of its parent.

• Overflow; If the parent element has its overflow property set to hidden or scroll it can cause the child element to overflow and appear outside of its parent's height.

• Margin or Padding: Margin and padding on the child element can also push it outside of its parent's height.

• Fixed Height; you can use min-height instead of height in CSS to set the minimum height for an element. The min-height property allows the element to grow and expand vertically . In your case, you could replace .card height to min-height such like snippet below:

.card{
...remaining code...
min-height: 40%;
...remaining code...
}

Hope that could be much Helpful. Keep happy coding...

Congrats on finishing this design.

I see that you used grid-template-columns: 1fr 1fr 1fr;

To adjust this for smaller screen i would suggest that you use

@media (max-width: 500px) { .card { grid-template-columns: 1fr 1fr; } }

This way, when your screen is smaller than 500px the grid will display 2 columns instead of 3.

The @media are querry that adjust styles in css for different media types and sizes you can read more on here: https://www.w3schools.com/cssref/css3_pr_mediaquery.php