Product Preview card component

Community feedback

• 

  Santiago Moraga Caldera•710

  @Remy349

  Posted over 2 years ago

  Hello @Isaiah-0914, the responsive design is available but only from the 1440px size, in that size shows you the card as it should be in the challenge. As a recommendation make sure you change the media queries measures, usually I adapt it from 1000px or 1200px, this way I make sure it shows the expected result in most of the devices. Your problem is due to the fact that there are different screen sizes, so some will display correctly and others will not. Example: on my laptop the card does not look good because the size of my screen is 1360px. I hope this helps you :)

  01

  Marked as helpful
• 

  Liyan Anajao•990

  @LiyanNguyen

  Posted over 2 years ago

  Hi Isaiah,

  I took a look at your source code, do review the @media query and the difference between (min-width) and (max-width)

  also try not to specifically target 1440px, try doing something like (max-width: 1080px) on the .box class, I tried it on manually on browser dev tools and it works

  hope that helps

  01

  Marked as helpful
• 

  Uday Kumar•80

  @UK0724

  Posted over 2 years ago

  Hi @Isaiah-0914 👋, good job completing this challenge.

  • I have looked into your code, You have used margin "200px auto"

  .box {
      display: flex;
      width: 40%;
      /* max-width: 500px; */
      margin: 200px auto;
      /* border: 2px solid; */
      border-radius: 15px;
      /* overflow: hidden; */
      /* height: 50%; */
      background-color: white;
  }    
  

  • insted of using margin you can use flex propertIies. since you already used it.

    .box{
          display:flex;
          justify-content:center;
         align-items:center;
  }
  

  the above code will center the box

  I hope those tips will help you.

  Good job, and happy coding!

  00