Open SophieBellehumeur opened 2 years ago
Hi @SophieBellehumeur,
Here are my recommendations for fixing your issues. The two images on left separating from each other at first seems like a grid issue but it's actually a flexbox property. If you add align-items: flex-start;
to .top-half
, that will force the content to not stretch the entire available space within the flexbox.
What I would do next is remove align-items: center;
on .main-images
so that everything is aligned at the top.
Lastly, I would include this bit of css for the larger image so that it is always the same height as the other two. I figured this out after class yesterday.
.item3 {
grid-area: item3;
height: 100%;
object-fit: cover;
}
Hopefully this all makes sense.
Good luck!
Wendy
@wendywarren Thank you Wendy, this helped so much and solved other small issues that were happening. So for the small images I still don't know how to remove the grid that is making the .small-images be in a column next to the .people, only for desktop, because that is something that is in my plan for desktop. What I mean is I want in the desktop view, for the .small-images and .people to be stacked one after the other. If you don't think it's a good idea, I just won't bother. Thank you so much, Sophie.
@wendywarren Hi Wendy, I'm almost finished my product page. There are two last things I can't figure out. First, in my tablet media query, the main images specifically the two on the top left are separating away from each other, however it doesn't seem to be a problem in desktop. Also in my desktop media query I want to have the quotes under the images of people also browsed (one after the other). So I'm not quite sure how I take the display flex away. Thanks, Sophie.