Blog-preview-card

Community feedback

• 

  Dreamleaf•230

  @DreamleafPosted 11 months ago

  Generally very good, but you have some problems with the card width changing on different viewport sizes.

  For example, the image could be placed without a wrapper element to fix that section - or you could add display: contents; to the .header__bg class.

  The html could also be simplified by reducing the number of wrapper divs you are using, I approach these types of layouts with the following structure:

  main.card

  img (no wrapper needed) aside (the tag and post date) div.content (title and teaser text) user info (could wrap in a semantic aside or footer if desired) close main

  You can center everything using flex or grid on the body, and add a standard padding to the .card. This way you may just need to tinker with specific sizings in a media query if needed.

  Hope this is helpful! And have a great christmas!

  Marked as helpful

  0