@AgataLiberska
Posted
Hi @Sven72!
-
I would agree that the quotes would work best as a background image rather than
<img>, you can try to play with background-size and background-position properties to position it. I guess you could also try to add a pseudoelement and set that image as background to that. -
The issue with the images is that when you use flexbox, it tries to adjust the size of flex items to fill the available space. When the names of those two people wrap, the container gets taller, so the images stretch to fill that space. (also, for Jonathan Walters, the width is set to 90px and on all other images, to 3em) To solve this, you could explicitly say that you want the images to stay a certain height, so they won't stretch. In addition to that, I would personally change the media query so that it moves from column to grid a bit later, because some of the boxes are really narrow at 768px. Or you could add a new layout for tablet size :)
Hope this helps :)
