Blog preview card using CSS Grid

Community feedback

• 

  Alex•3,130

  @Alex-Archer-IPosted 6 months ago

  Hi! Good work =) Cool idea with hover and the box-shadow.

  You don't have to declare height for img - you can just use width and it'll keep it's proportions. Also you can use percentages to make it responsive.

  Yeah, flex is much easier than a grid. Just set display of parent element to flex and use align-items and justify-content (not 'justify-items' like in grid) to arrange content.

  .flex {
      display: flex;
      flex-direction: column;  /* row is default value */
      align-items: center;
      justify-content: center;
  }
  

  And hey - I learned how to use backticks =)

  Marked as helpful

  1

  ---

  

  TwinkleByte•20

  @TwinkleBytePosted 6 months ago

  @Alex-Archer-I Nice. Your reply looks more professional now. :)

  Removing height for the article-img inside media query fixed the issue with border-radius.

  I see. I can heard using percentage for elements is bad practice but I guess its good practice to use it for images. Also, thanks for teaching me how to use flex. Your feedback is great as always.

  1

  

  Alex•3,130

  @Alex-Archer-IPosted 6 months ago

  @LoneBrokeBoy Thank you =)

  I usually use percentage for creating responsive elements like this:

  main {
      width: 95%;
      max-width: 40rem;
  }
  

  When display size is less than 40 rem this element always will be 95% from it. And for images I meant using width: 100% for those that should stretch with the element - like header picture - and using px or rem for static pictures - like user profile. But I'll read more about pros and cons of percentages.

  So, thanks again. Fell free to ask, comment and stuff =)

  0