Skip to content
Submitted over 2 years ago

Social Proof

Samson Sham•140
@samsonsham
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social proof section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Please feel free to comment! Thank you so much!

Could anybody shed me some light of what would be the proper way to start with desktop view? I would like to use grid-template and cut the entire page into 3 parts because I don't need extra wrapping in my html like using Flexbox. But I found it difficult to control the height and vertical alignment in my grids, especially while I am v-center my main.

Community feedback

  • Tiago BW•210
    @tiagobwPosted over 2 years ago

    Hi Samson,

    you can remove your <div class="container"> and add height: 100vh + the flex properties directly to the body, like so:

    body {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

    I hope that helps.

    And congratulations on completing the challenge. :)

    1
    Samson Sham•140
    @samsonshamPosted over 2 years ago

    @tiagobw Hi Tiago 👋 Thanks for your reply! I followed your suggestion to remove container class and add the corresponding style to the body and it works.

    1

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