Responsive product card using Flexbox and Media Query

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Lajoc, congratulations for your solution!

  You did a good work with the desktop and mobile version. But consider that even if you've used correctly the media query the component isn't flexible, note when the window start to scale down the component doesn't contract wrapping the info inside. You can solve that working with max-width; for the container sizes.

  The alignment is correct, but a best practice is that you apply the 100vh inside the body and not the container. See below how should look your code after the fix:

  body {
      display: flex;
      background-color: var(--Cream);
      font-family: "Montserrat", sans-serif;
      font-weight: 500;
      align-items: center;
      justify-content: center;
      height: 100vh;
  }
  

  Hope it helps Lajoc, keep it up!

  0