Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog-preview-card

@GermanGuerrero95

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello community.

Any suggestion is welcome.

Merry christmas 🎄 👍👍👍👍

Community feedback

Dreamleaf 230

@Dreamleaf

Posted

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

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

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord