Skip to content
Submitted 10 months ago

Responsive Clipboard Landing Page using CSS Grid And Flexbox

Mishael K•200
@MishaelKalota
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Clipboard landing page
  • HTML
  • CSS
2junior

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

  • Lindsey Dortch•40
    @lindseydortchPosted 10 months ago

    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
    @MishaelKalotaPosted 10 months ago

    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

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