3column-preview-card using flexbox and grid

Community feedback

• 

  Akshay•810

  @akshaywebsterPosted almost 3 years ago

  Hi, Nitin!

  I think you've done a great job with the project as far as responsiveness is concerned.

  I noticed this line of CSS in your code:

  @media screen and (max-width: 50.9375em) {
    .container {
      width: 17.4375rem;
    }
  }
  

  Something I prefer doing for the mobile view is to put a relative unit for the container's width like:

  .container {
    width: 90%;
    max-width: 450px; /* or something else, it doesn't have to be just 450 */
  }
  

  What this does is it makes your container a relative width to the mobile's screen size, and then it stops the container's width from expanding at 450px after a certain screen size.

  If there's any specific question about responsiveness that you want to ask, feel free.

  I hope my feedback is helpful to you. Have a great day!

  Marked as helpful

  1

  ---

  

  Nitin Rawat•30

  @codername-123Posted almost 3 years ago

  Hello Akshay, Thank you for your feedback. It was helpful. Actually I'm very new to CSS. So I'm having a difficult time to digest the concept of responsive designs and typography i.e. how to make the site responsive using relative units. Especially in-between mobile and desktop screens. Could you suggest me some resources to learn the same.

  Thank you!

  0

  

  Akshay•810

  @akshaywebsterPosted almost 3 years ago

  @codername-123

  It's okay to be a beginner.

  Here's a video on relative units by Kevin Powell: Are you using the right CSS units?

  You can browse through Kevin's channel & you'll find a lot of valuable info about responsive layouts and basically everything about CSS.

  0