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

Responsive Clipboard Landing Page using CSS Grid And Flexbox

Mishael K 200

@MishaelKalota

Desktop design screenshot for the Clipboard landing page coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi everyone! This is my solution for the challenge. I personally struggled with getting the background color to fill the entire footer, If you're using chrome or edge you'll be able to see it (a gap) but you won't see it in firefox. Would really appreciate some help on how to make the background color fill the entire footer.

Community feedback

P

@lindseydortch

Posted

Your issue in the footer is that you are using a grid-container for .container-8 and using align-self to center on the .info div, you need to use stretch here (which is the default behavior for align-self, so you can actually remove that line) because then the content only expands to what all of the content is for container-8 and not just the info container itself. Then you need to apply something like flexbox to actually get the content in the center of the info div.

Marked as helpful

0

Mishael K 200

@MishaelKalota

Posted

Thank you @lindseydortch, I followed your advice, and it worked like a charm. Thanks once again; I truly appreciate it

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