Product Preview Card Using HTML, CSS

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Lesley, congratulations for your new solution!

  Great solution as always, I saw your older solutions and you've great stuff! About this solution you did pretty much everything, the container is beautiful and fully responsive.

  The only thing I thhink you can change is the alignment and instead of using margins, do it with flexbox in the body.

  See the changes I did to your code:

  body {
      min-height: 100vh;
      margin: 0;
      font-size: 14px;
      font-family: var(--montserrat);
      background: var(--cream);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
  }
  
  }
  @media (min-width: 700px)
  .flex {
      display: flex;
  }
  @media (min-width: 700px)
  .container {
      width: min(600px, 95%);
      /* margin: 3rem auto; */
      /* margin-top: 15vh; */
      /* box-shadow: 5px 3px 20px var(--verydarkblue); */
  }
  .container {
      width: min(400px, 95%);
      /* margin: 3rem auto; */
  }
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Lesley Kimutai•565

  @LeskimPosted over 2 years ago

  @correlucas Thanks Lucas much appreciated

  1