Product-preview-card-component

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="cart"> with the main tag and <h2 class="product_name"> with <h1> to fix the accessibility issues

  To .cart on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body. Instead of giving .cart position: relative and its properties.

  Give .cart a fixed width value instead of a percentage width value

  Use rem and em as unit for the padding, margin and width values instead of percentages and px for more on CSS unit watch this https://youtu.be/N5wpD9Ov_To

  Hope am helpful. Happy coding.

  0
• 

  faizan•2,420

  @afaiz-spacePosted almost 2 years ago

  Hey @EndoHr, congratulation on completing the first challenge.

  add

  body {
      /*background-color: hsl(30, 38%, 92%); */
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  }
  

  remove position left and top property from cart class.

  .cart {
      /* position: relative; */ 
      /* left: 28%; */
      /* top: 80px; */
      display: flex;
      border-radius: 10px;
      width: 35rem;
      flex-direction: row;
      overflow: hidden;
  }
  

  • remove height and replace width:21%; with width:50%; in the .perfume class.
  • replace width:21%; with width:50%; in the .details class.

  remove top and left property from the media cart class.

  @media only screen and (max-width: 600px)
  .cart {
      /* top: 10px; */
      flex-direction: column;
      /* left: 5%; */
      width: 100%;
  }
  

  • replace /* width: 90%; */ with width: 100%; in the media .perfume_mob class.

  0
• 

  S MD suleman•3,530

  @sulemaan7070Posted almost 2 years ago

  hey Endo_hr😄 Firstly I congratulate you on completing the first challenge,I see you are having a problem, you can make whole body as flex.

  1. you can try

  display:flex;
  align-items:center;
  justify-content:center;
  }``` .This will the whole `cart `-div centered.
  
  2. and for the `details-div` you can use the
   ```.details{
  display:flex;
  align-items:center;
  justify-content:space-between;
  }```. along with some padding. I hope this helps and let me know if you need any further assistance💯.. happy coding🔥
  

  0
• 

  Revin•280

  @revin212Posted almost 2 years ago

  Hello, nice job for finishing the project!

  You can center the card using "display: flex" on your body tag, "justify-content: center", and "align-items: center".

  use width:50% for the image and the description, and then, set the card max-width to 500px. Your problem is, the image and description didnt fill all the space (100%) of the div "cart" class.

  for the border-radius problem, this might help you:

  use "overflow: hidden;" on the card element (in your case, the div "cart" class).

  0