product-preview-card-component

Community feedback

• 

  Letícia G. Soares•60

  @LeticiaGSoaresPosted about 1 year ago

  instead of margin to centralize the card, you could do this:

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

  Marked as helpful

  0

  ---

  

  Lina•50

  @saralinamPosted about 1 year ago

  I appreciated it & thank you for suggestion @GabigoldoSenai

  1
• 

  Atif Iqbal•3,200

  @atif-devPosted about 1 year ago

  Hi, congrats🎉 on completing the challenge. Better take care about following points.

  • For better preview and centered, modify your code as:

  1. Add min-height: 100vh; in body selector inside CSS.
  2. Remove all CSS code of main selector.
  3. Add margin-top: 1em; in .attribution selector.

  .container {
    display: flex;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 0.1rem solid #ebdddf;
    box-shadow: 0 0.2rem 1rem black;
    height: 25rem;
    max-width: 520px;
  }
  .left-side {
      background: url(images/image-product-desktop.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      height: 100%;
      width: 50%;
  }
  @media (max-width: 525px)
  .container {
      display: flex;
      flex-direction: column;
      height: 39rem;
      width: 20rem;
  }
  
  @media (max-width: 525px)
  .left-side {
      background: url(images/image-product-mobile.jpg);
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      width: 100%;
  }
  

  • In README file of your GitHub project's solution remove already present content and write about your own working flow, findings, new learned things, useful resources, etc.

  --Got any questions, REPLY--

  Hope you will find this Feedback Helpful.

  Let's connect for learning📝 and sharing🤝: Twitter , Instagram , LinkedIn , GitHub

  0

  ---

  

  Lina•50

  @saralinamPosted about 1 year ago

  @atif-dev Thanks a lot!!! It looks so much better! :)

  0