Responsive product card design using flexbox

Community feedback

• 

  Hector Brito•470

  @hectorjbd

  Posted almost 3 years ago

  Hello! I did this:

  @media only screen and (min-width: 640px) and (max-width: 768px){ .contenedor{ max-width: 600px; } }

  @media only screen and (max-width: 640px){ .contenedor{ min-width: auto; width: 90%; display: flex; flex-direction: column; border-radius: 20px; margin: auto; }

  10

  Marked as helpful
• 

  Melad•220

  @melad99

  Posted almost 3 years ago

  2-To center the container in the middle of the page I used this for CSS in my solution and it works perfectly:

  .class-name{

  position:absolute;

  top:50%;

  left:50%;

  transform:translate(-50%, -50%);

  }

  3:for the image and text I split the container into left and right ..giving the photo width and also the texts div and like this you can contain both.

  I hope that's will help you and that you did a great job and try with this challenge ...good luck with other challenegs.

  00

  Marked as helpful
• 

  Gloryjaw•320

  @Gloryjaw

  Posted almost 3 years ago

  Hi, nice try on the challenge.✨ There are lots of things you can do to improve the design. Some of them are-->

  1. Using % as widths to make your items responsive.
  2. You can give body display flex and height 100vh. Then use justify content and align items to center the whole container in the middle
  3. Images are by default not responsive, you should give them widths(in % of course). It will adjust its height according to aspect ratio.

  00

  Marked as helpful