Frontend Mentor | Product preview page using flexbox. coding challenge solution

Solution retrospective

I struggled with the responsiveness on this one, a lot. I think it could be a lot better and would appreciate comments on that. A feq questions I have are :

How do I center the entire thing in the center of the page as given in the design ? 2 ) I think the text padding needs to be fixed on mobile.

Community feedback

Guillermo Mulvihill• 190

@guilleoem

Posted over 2 years ago

Change this properties

#container {
    display: inline-flex;
    flex-wrap: wrap;
    height: 100%;
    justify-content: center;
}

And try this

#container {
    display: flex;
    flex-direction: row;
    height: 400px; /*adjust this!!*/
    justify-content: center;
    align-items: center;
}

Bismeet singh• 190

@BismeetSingh

Posted over 2 years ago

@guilleoem Is a fixed height a good idea ?

Guillermo Mulvihill• 190

@guilleoem

Posted over 2 years ago

@BismeetSingh No. that is the reason why I left you as a clarification that you adjust the height. the properties that I left you as an example is for you to see how to center the container.

Bismeet singh• 190

@BismeetSingh

Posted over 2 years ago

@guilleoem I can do something like this : picture,picture > img { height: 30rem; }, I dont know if I should that though,

Guillermo Mulvihill• 190

@guilleoem

Posted over 2 years ago

@BismeetSingh Yes, by giving that properties to the picture element, the height of #container sets the height of picture also. however you must adjust de width of #content.

João Gabriel• 340

@joaojgabriel

Posted over 2 years ago

There are two modern, declarative, and straightforward ways to center direct children elements (in this case it's only one, the card <div> inside <main>), and you technically already did one of them, using Flexbox. The other would be using Grid, like this:

main {
    display: grid;
    place-items: center;
}

But as I said, though, you already did it with Flexbox. The only thing messing it up is how images work in CSS. The quick workaround: img { max-width: 100%; }. I can't go in depth on the other notes at the moment, but for now you can take a look at the code for my solution to pick up on some other details.

Bismeet singh• 190

@BismeetSingh

Posted over 2 years ago

@joaojgabriel I dont see img { max-width: 100%; } making any difference.

Bismeet singh• 190

@BismeetSingh

Posted over 2 years ago

@joaojgabriel Why did you specify min-height: auto; in the media query for the card, removing that seems to stretch the image badly

João Gabriel• 340

@joaojgabriel

Posted over 2 years ago

@BismeetSingh, nothing fancy... it was actually to undo the min-height: 90vh I've put for the mobile version. 0 or any small value would do the job. The reason why it stretches without it is that in cases in which the max-height is smaller than the min-height, only the min-height is computed; around 90% of the viewport height, in this case. You can check that by looking at the Computed section of the DevTools, with and without some value of min-height in the @media

Marked as helpful

João Gabriel• 340

@joaojgabriel

Posted over 2 years ago

@BismeetSingh the img { max-width: 100%; } was really just the first step you had to take. Without it, the image was stuck at its intrinsic size. After you made that, the image will only grow as wide as the width of the container it is inside of (that's what the 100% is referring to). After you do that, you control the width of the said container, than the image will follow (right now it doesn't).

Bismeet singh• 190

@BismeetSingh

Posted about 2 years ago

@joaojgabriel Your repo really helped, thanks.

Product preview page using flexbox.

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community