Blog

What are you most proud of, and what would you do differently next time?

It was easier doing this the second time from Figma.

What challenges did you encounter, and how did you overcome them?

I couldn't work out how to make the font size change without media queries. I also found centering the card tricky; for some reason, this time : display grid with place-content: center didn't work on the .card-container. I had to use place-self: center on the .card itself.

What specific areas of your project would you like help with?

1. If .card-container is set to display: grid; and .card is a child of .card-container, place-content: center; did not work when width of .card was set to min(384px, 100%-48px). It seemed to calculate the larger width of the min options on desktop, use this to incorrectly center the content, and then shrink down to the smaller of the min options in terms of what it actually painted. Is this just an issue with using width: min(a,b) with grid children? I'm aware of minmax for the grid-columns, but am wondering if we can use plain old min for the grid children.

2. Any help on how to make the font smaller without media queries as the front end mentor challenge suggested would be appreciated :)