Responsive order summary using Flex and CSS Grid

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  Hello Erick, congratulations for your solution!

  In this challenge you don't really need a media query to manage the component card responsiveness. There are 2 zones you need to work the responsiveness, the card requires max-width: 340px to be responsive and able to contract, note that the difference between width and max-width is that the first is fixed and the second (max) means the card has a maximum size but can be smaller. So having the card with max-width all you need is the inner content with max-width: 100% to have the container size less its padding (the pricing section + button).

  To have the image respecting the container size use display: block and again max-width: 100% / object-fit: cover to make it scales and crop inside the container limits.

  Hope this helps, happy coding. 👍

  1
• 

  Adriano•38,310

  @AdrianoEscarabotePosted about 2 years ago

  Hello everything is fine?

  I really liked the result of your project, but I have some tips that I think you will like:

  I noticed that the background is lowering according to the screen resolution, to solve this we can do the following:

  background-size: 100% 50vmin;

  To further improve the responsiveness of the project, we can put a padding on the body, so that the content doesn't hit the edge when the screen resolution is small:

  body { padding: 0 20px; }

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

  0