search

SophieBellehumeur / product-page

Design and build a product page for multiple screen sizes using media queries.
0 stars 0 forks source link

Product Page Media Queries #1

Open SophieBellehumeur opened 2 years ago

SophieBellehumeur commented 2 years ago

@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.

wendywarren commented 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.

Screen Shot 2022-10-15 at 5 30 17 PM

What I would do next is remove align-items: center; on .main-images so that everything is aligned at the top.

Screen Shot 2022-10-15 at 5 33 31 PM

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;
}

Screen Shot 2022-10-15 at 5 35 48 PM

Hopefully this all makes sense.

Good luck!

Wendy

SophieBellehumeur commented 2 years ago

@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.