Product Preview card components

Community feedback

• 

  P

  Alper•1,010

  @adonmez04Posted over 1 year ago

  Hi, @kellynick.

  That's a good solution, keep coding. Here are some quick tips.

  1 - You don't need to add padding to your .main-section class to give it some space or center. You can use flex or grid to center your container within the body (its parent).

  And you can use max-width and margin: 0 auto to add some space to the left and right side of your design. For example:

  You don't need this:

  .main-section {
      /* background-color: hsl(30, 38%, 92%); */
      /* padding: 9.6rem; */
      /* height: 100vh; */
  }
  

  You can use this:

  body {
      display: grid;
      place-content: center;
      margin: 0 auto;
      min-height: 100vh;
      background-color: hsl(30, 38%, 92%);
  }
  

  These are to center your content within the body and make everything clearer and easier to read.

  2 - Another thing is to decrease your font-size value to make your font smaller.

  html {
      font-size: 62.5%;
  }
  

  It looks cool, but you don't need to use it. You can use more modern tools like the clamp feature. For example:

  :root {
    /* 18px → 24px */
    font-size: clamp(1.13rem, calc(0.99rem + 0.56vw), 1.50rem);
  }
  

  This will grow and shrink your font-size to 18px - 24px between the min-viewport: 375px and max-viewport:1440px.

  You can also use the clamp function for the margin and padding areas and calculate these values here: https://utopia.fyi/

  I hope this will help you. You have good skills about coding, you just need to improve your skills. Keep coding and have a wonderful day.

  1

  ---

  

  Kelly Agbonifo•90

  @kellynickPosted over 1 year ago

  @adonmez04 Thank you so much I really appreciate your feedback. I implemented your guide in my next project and it worked perfectly. Regarding decreasing my font from html{ Font-size:62.5% } To the modern way of doing it. I have to take some time to learn it . Thanks so much 🙏🙏🙏 I'll be submitting my next project soon I'll appreciate it you can help go through it. Thanks 🙏

  1

  

  P

  Alper•1,010

  @adonmez04Posted over 1 year ago

  @kellynick You're welcome. I highly recommend that you solve a project over and over again. For each iteration, you can focus on a different problem and try to implement some modern methods. I solved some projects 5 times and learned a lot each time...

  0

  

  Kelly Agbonifo•90

  @kellynickPosted over 1 year ago

  @adonmez04 Thank you so much . I will do that. It will help me improve.

  1