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

@JohananOppongAmoateng

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


What are you most proud of, and what would you do differently next time?

not really proud could not get the work to center correctly

What challenges did you encounter, and how did you overcome them?

centering elements responsiveness

What specific areas of your project would you like help with?

centering elements responsiveness

Community feedback

Yana 370

@yanabue

Posted

Hi, a few notes to help you out:

  • When you don't set the body elements height - it's height will only be as high as the content inside of it. If you look at the body element in dev tools - you'll see its only a part of the screens height. So set the body height to 100vh and the card should be centered vertically in the page.

  • When it comes to the text content inside the card - I suggest you wrap all that content thats not the head image - in a div. Then it would be much easier to manipulate.

  • Set vertical margin/padding to any elements in the card as needed to space them out from each other.

  • To set the correct colors in the projects - just use the :root selector to set variable colors, as provided in the styles guide file.

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