Responsive product preview card component

Community feedback

• 

  Hyron•5,870

  @hyrongennikePosted about 2 years ago

  Hi @ajay117,

  Nice job on your first attempt of the challenge

  You can the change the width: 60% to max-width: 50%; that way it's more responsive. To center a card easily you can use flexbox replace your body rule with the below.

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

  in order for this to work you need to remove the following properties every on the main tag rule.

  main {
      border-radius: 10px;
      background-color: var(--white);
      margin: 0 15px;
      /* position: absolute; */ **remove**
      /* top: 50%; */ **remove**
     /* left: 50%; */ **remove**
      /* transform: translateY(-50%); */ **remove**
  }
  

  Hope this is helpful

  Marked as helpful

  1

  ---

  

  Ajay•240

  @ajay117Posted about 2 years ago

  @hyrongennike thank you so much for your help, it worked and is more responsive. It helped a lot, really appreciate it.

  0
• 

  Akram Adjab•380

  @akramAdjabPosted about 2 years ago

  Hello Ajay 🙋🏻‍♂️, Congrats on completing this challenge

  I checked your solution code, and I found small mistakes in your code

  • Don't specify the width component in the @media query, try specifying the width in the main tag
  • Don't use percentage to define width, we only use percentage to make responsive images. So you can use units like px, em, rem to define a fixed width for your component, and you can write @media query when your design crashes

  I hope my feedback was helpful 🙌🏻

  Marked as helpful

  1

  ---

  

  Ajay•240

  @ajay117Posted about 2 years ago

  @akramAdjab thank you for your suggestion, really appreciate it...

  0