Product Details card

Community feedback

• 

  Jo Young•840

  @Jo-cloud85Posted over 1 year ago

  Hi Soban,

  The issue may be because your #container is at a flexible width of 45% of the screen while the .image is at a fixed width of 300px. Thus, once 45% of the screen width goes below a certain width, the image overpowers the screen. In addition, your media screen width only starts at 375px. Thus, when the screen starts to shift between the desktop and phone-size screen, the output becomes distorted. As this is a card exercise, it may not be necessary to create a flexible width but this is just my opinion.

  Anyhow, here are a few steps to quickly solve your issue. At least, it seemed to work on my screen.

  body {
        padding: 0px;
        margin: 0px;
        background-color: hsl(30, 38%, 92%);
        height: 100vh; //add this
        display: grid; //add this to center your whole card
        place-content: center; //add this to center your whole card
  }
  
  #container {
        width: 580px; //add this to fix your card. you can modify the size if you want
        height: 430px;  //add this to fix your card. you can modify the size if you want
        display: flex;
        flex-direction: row;
        margin: 60px auto 10px auto;
        border: 1px solid white;
        border-radius: 10px;
        background-color: hsl(0, 0%, 100%);
  }
  
  .image { //change to this and remove the rest
        border-radius: 10px 0px 0px 10px;
        flex: 1; //add this so that the image is kept to half the container size
  }
  
  @media screen and (max-width: 375px) {
        body { //change to this and remove the rest
          background-color: hsl(30, 38%, 92%); 
        }
  
        #container { //change to this and remove the rest
          width: 90vw;
          min-height: 545px;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 60px auto 0 auto;
        }
  
        .image { //change to this and remove the rest
          width:100%;
          object-fit: cover;
          padding: 0;
          border-radius: 10px 10px 0px 0px;
          overflow: hidden;
        }
  
  

  Lastly, I would recommend going for 480px for your mobile screen max-width as phones like iPhone 12 have a wider width than 375px.

  Hope this will help you. Cheers!

  Marked as helpful

  1

  ---

  

  soban•50

  @the-sobanPosted over 1 year ago

  @Jo-cloud85 Thanks a lot! I just tried this code n it works. Didn't know about that place-content in grid, but now I find it the fastest way to center cards on body. Thanks again, cheers!

  0