Product Preview Card Component using flexbox CSS

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hi David, you did well here in getting your solution look close to the design, and both the desktop and mobile views look good 😊

  About your question, what I suggest that instead of 175% on the .card-image, you can use flexbox's properties to use flex: 1 1 50% on the children containers, so try adding that on .card-image and card-information.

  I also suggest that instead of using a 175px left margin on your card container (which I'm guessing is for centering the component), try changing the margin to just 1rem, and then on the body selector, add min-height: 100vh and justify-content: center to center the component.

  Hope this helps!

  Marked as helpful

  0

  ---

  

  David Chavez•190

  @codeDavidCPosted about 2 years ago

  @elaineleung Thanks, Ill try this over the weekend!

  0
• 

  Adriano•38,390

  @AdrianoEscarabotePosted about 2 years ago

  Hello everything is fine?

  You did a good job on this challenge, but I have a few tips that I think you'll like:

  I noticed that the content of the layout was not so aligned, when working with a card like this, prefer to center it this way:

  body { display: flex; flex-direction: column; align-items: center; justify-content: center; min height: 100vh; }

  This will avoid problems!

  The rest is really good! Hope it helps... 👍

  Marked as helpful

  0

  ---

  

  David Chavez•190

  @codeDavidCPosted about 2 years ago

  @AdrianoEscarabote Thanks for your tip! Yeah I've been having aligning struggles.

  0

  

  Adriano•38,390

  @AdrianoEscarabotePosted about 2 years ago

  @codeDavidC no problem, keep coding

  0
• 

  David•8,000

  @DavidMorgadePosted about 2 years ago

  Hello David, congrats on finishing the challenge! great job!

  Another workaround to fix this issue would be giving the text box a smaller width so the div with the picture takes a little more space, for example width: 90%

  Apart from that, instead of giving a margin to your div class='card' you should try using justify-content: center on the body, this will center the card without the needs of margins, you would need to set the min-height: 100vh in the body tho, so it wraps the full screen!

  Hope my feedback helps you, great job getting the challenge done!, I encourage you to try harder challenges!

  Marked as helpful

  0

  ---

  

  David Chavez•190

  @codeDavidCPosted about 2 years ago

  @DavidMorgade You're right, I'll try one more "newbie" challenge and move on to some harder challenges. Thanks!

  1