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

Mobile first with flexbox

@Fenroe

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Focused on the fundamentals with this one. Anyone have any tips for adjusting the size of container child elements so that the desktop version doesn't look so empty?

Community feedback

Benja.min 740

@BenjaDotMin

Posted

Hiya David, great work here.

Regarding your question: I would put on your body tag: display: flex; align-items: center; justify-content: center; height: 100vh;

Then on your main tag: max-width: 920px; and remove the margin rules you have for desktop and mobile.

Then on your footer tag: position:fixed; bottom: 40px... or so.

That should centre things up nicely!

1

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