Huddle APP Call-To-Action Page with CSS Grid

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  👾Hello Stefan, congratulations for your new solution!

  Your solution design and elements are really good done, but I think you can give less value to the padding for the footer and header, they've a big padding and this is making the page create a scroll bar.

  I did some modifications to your code, aligning everything to the vertical center and removing the paddings/margins, see the changes below:

  .main-section .container {
      display: grid;
      grid-template-columns: 57fr 43fr;
      column-gap: 56px;
  }
  
  body {
      font-family: "Poppins", sans-serif;
      background-color: var(--violet);
      color: #fff;
      line-height: 1;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
  }
  
  }
  .footer {
      /* padding: 4rem 0; */
      margin-top: auto;
  }
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  0

  ---

  

  Stefan•100

  @St3f4nnPosted over 2 years ago

  Hi, @correlucas!

  First of all, thank you for your time in reviewing my code! Seriously, I appreciate it a lot!

  Yeah... I assumed I missed all the spacings in the entire project. That's because I don't have a PRO version of a Frontend Mentor where I can have access to a Figma file of this design so I measured all spacings in Paint 3D.

  1