Using Grid. Puzzling about Background Image and Testimonial Images
Design comparison
Solution retrospective
Hi,
there are a some details, I don't understand: 1.) Where to place the quotation marks? I think, it is neccessary to display them as background-image. Otherwise you need to set Opacity, which makes the Headline blurr. I tried first to put it in a div and place it absolute. Than I put the marks as background in heade. Problem: They are not displayed as in design. How to cope with this? 2.) Testimonial images behaves mostly okay. Except Jonathan Walters and Jeanette Harmon, when the containers are very small. How to tackle this? Best and stay healthy,
S.
Community feedback
- @AgataLiberskaPosted over 3 years ago
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 :)
1 -
Please log in to post a comment
Log in with GitHub
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