All comments

• 

  Ankit Yadav• 20

  @20-ank-02

  Submitted about 2 years ago

  

  product-preview-card-component

  1

  20

  

  zofia-mm• 160

  @zofia-mm

  Posted about 2 years ago

  It's so pretty! 🤩

  Only one thing is off - centering. I know, 'cause I had that problem too. Here's a solution that @DavidMorgade gave me:

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

  Marked as helpful

  2

  This comment has received 2 repliesShow
• 

  Adeola Ganiu• 1,320

  @Deolabest

  Submitted about 2 years ago

  I'm really having troubles with the media queries. Please any suggestions on how make this project responsive on the mobile?

  

  Product Preview Card using CSS Grid

  2

  50

  

  zofia-mm• 160

  @zofia-mm

  Posted about 2 years ago

  I'm no expert, but I've managed to make my media queries work. If you want to take a closer look - check out my solution to this very challenge! And if you have any specific question - hmu, will do my best to answer.

  But here's a quick example:

  @media only screen and ( max-width: 500px )
  {  /* mobile */
      .main-column
      {
           flex-direction: column;
           margin-left: 15px;
           margin-right: 15px;
      }
  }
  @media only screen and ( min-width: 501px )
  {  /* desktop */
      .main-column
      {
           flex-direction: row;
           width: 22rem;
      }
  }
  .main-column
  {
      /* things like background color and styling */
  }
  

  P.S. I felt really insprired by the way you've organized your css file.

  P.P.S. Great job with the design! ;)

  Marked as helpful

  0