Product preview page using flexbox.

Community feedback

• 

  Guillermo Mulvihill•190

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

  0

  ---

  

  Bismeet singh•190

  @BismeetSinghPosted over 2 years ago

  @guilleoem Is a fixed height a good idea ?

  0

  

  Guillermo Mulvihill•190

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

  0

  

  Bismeet singh•190

  @BismeetSinghPosted over 2 years ago

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

  0

  

  Guillermo Mulvihill•190

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

  0
• 

  João Gabriel•340

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

  0

  ---

  

  Bismeet singh•190

  @BismeetSinghPosted over 2 years ago

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

  0

  

  Bismeet singh•190

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

  0

  

  João Gabriel•340

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

  0

  

  João Gabriel•340

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

  0

  

  Bismeet singh•190

  @BismeetSinghPosted over 2 years ago

  @joaojgabriel Your repo really helped, thanks.

  1