Responsive landing page

Community feedback

• 

  Wendy•1,970

  @wendyhamelPosted over 1 year ago

  Hi Stephen,

  In answer to your question:

  You are close, if you move te styling of the border from the i elements to the parent div you're all set. The i element is used for the fontawesome. I would not use it for other styling. The padding right you added to create the space between the icons will be a problem if you move the border styling. You can change that to margin. Notice you are writing invalid css with your line of: border-color: #fff 20px solid Do you know how you can fix that? I won't write it out for you, so you can try for yourself. If you need more help to get it to work, feel free to respond.

  Something to add: color: white to the div styling to give the icons the white color to start with.

  Hope this helps you to finish this challenge nicely!

  Happy coding!

  Marked as helpful

  0
• 

  _nehal💎•6,710

  @NehalSahu8055Posted over 1 year ago

  Hello Coder 👋.

  Congratulations on successfully completing the challenge! 🎉

  Few suggestions regarding design.

  ➨To properly center the container.

  • USING FLEXBOX

  main{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  • USING GRID

  main{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  ➨ Quick Method : For circle border around social icons :

  i{
  color: white;
  border: 1px solid white;
  border-radius: 50%;
  }
  

  • You can adjust spacing using padding.

  I hope you find this helpful.

  Happy coding😄

  Marked as helpful

  0