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 CSS and HTML

Yewande Adeyemiβ€’ 110

@Wandesanguine

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Lucas πŸ‘Ύβ€’ 104,420

@correlucas

Posted

πŸ‘Ύ Hello Yewande, congratulations for your solution!

Your live solution design is just perfect, you've match all the color and element's sizes.

I've two tips for your:

1.Set the media query a little later in order to allow the desktop version contract a little bit, because if you don't do it, the media query will change all the content vertically and will have a really big empty lateral space.

2.The solution is really good done, the details etc, but you've missed the alignment, the content isn't centered. To do that you'll need to use flex properties for the alignment and height: 100vh; to display 100% of the viewport height. See the code fixes below:

body {
    height: 100vh;
    font-size: 15px;
    font-family: 'League Spartan', sans-serif;
    color: var(--White);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

Hope it helps Yewande, keep it up!

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