Blog Preview Card - Flexbox

Community feedback

• 

  Dylan Heslop•1,570

  @dylan-dot-cPosted 2 days ago

  This is a good solution!

  You made good use of semantic tags and that's awesome.

  Here are some ways to improve responsiveness for the mobile screen.

  • remove the height: 100vh this is normally good on large height screens but it's best practice to not set fixed height on most container elements as when the height is too small it can get cropped and don't overflow/scroll.
  • So just use min-height to fix that.
  • That will also fix the issue of when mobile screens are rotated making the height smaller than the width. In this case you can also add a padding: 2rem 0; to put space from the top/bottom of the webpage.
  • for the footer, making it absolute would be good only if the height is enough to fill the card, else it will position itself over the card. Best thing to do is just make it static(default) and put a margin to separate it from the card if you want.
  • for the hover effect, you can make it smoother by adding a transition: 150ms ease-in-out to create a kinda fade color effect instead of having it jumping colors.
  • also consider using CSS variables in ur code to make it modular and easily updated for the colors and maybe spacing If you want.

  OVerall you wrote some good semantic HTML code and by removing fixed heights and using min-height you can make your websites more flexible.

  Marked as helpful

  2