All comments

Ankit Yadav•20

@20-ank-02Submitted about 2 years ago

product-preview-card-component

zofia-mm•160

@zofia-mmPosted 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

Adeola Ganiu•1,320

@DeolabestSubmitted 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

zofia-mm•160

@zofia-mmPosted 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