Social links profile using Semantic HTML5,CSS custom properties

Community feedback

• 

  Nnoruka Maryjane .C•120

  @emjayrukaPosted 10 months ago

  Hey @julietoge,

  Your solution is commendable, even excellent.

  In the event that you do not possess the Figma design files, I would like to suggest utilizing a browser extension named Perfect Pixel.

  This extension enables you to conduct precise comparisons between your completed project and the design images provided upon downloading the project, facilitating accurate dimension verification. Its functionality can prove invaluable in your future projects.

  I hope you found this helpful

  Keep up the excellent work!

  Marked as helpful

  0

  ---

  

  Ogechi Juliet Uhegbu•40

  @oge-devPosted 10 months ago

  @emjayruka, I have already installed the browser extension named Perfect Pixel, but I don't know how to use it. Could you please recommend any resources for me so that I will know how to go about it?

  0

  

  Nnoruka Maryjane .C•120

  @emjayrukaPosted 10 months ago

  Hey @julietoge, this video should be of help https://youtu.be/DBrFv02bSsI?si=EwtMyDHoRIPAwGoo

  Marked as helpful

  0
• 

  Daniel 🛸•44,310

  @danielmrz-devPosted 10 months ago

  Hello @julietoge!

  Your project looks great!

  I have one suggestion for you to improve it even more:

  • Using margin or padding is not the best option to center an element. Here's a very efficient (and better) way to place an element in the middle of the page both vertically and horizontally:

  📌 Apply this to the body (in order to work properly, don't use position or margins):

  body {
      min-height: 100vh;
      display: flex;  /* it works with grid too  */
      justify-content: center;
      align-items: center;
  }
  

  I hope it helps!

  Other than that, great job!

  Marked as helpful

  0

  ---

  

  Ogechi Juliet Uhegbu•40

  @oge-devPosted 10 months ago

  @danielmrz-dev, thank you for this. It's really helpful. I wanted to apply this to the body, but it wasn't working because if the design exceeded 100vh, it would be cut off. So, I used margin instead. However, I've identified where my mistake came from. I coded height: 100vh; instead of min-height: 100vh;.

  1
• 

  azgpapi•90

  @azgpapiPosted 10 months ago

  no feedback needed, it is good what advice i can assist you is you can align the ending and starting part of your name and address start equally and end equally, you can just work with their font-size property. The rest is amazing.

  0

  ---

  

  Ogechi Juliet Uhegbu•40

  @oge-devPosted 10 months ago

  @azgpapi, thank you for your feedback. I truly appreciate it. However, based on the provided design, the font size for 'THE NAME' and 'THE ADDRESS' is not consistent. While the default font size is set at 14px, the font size of the name appears larger than 14px. Moreover, they are not equally aligned at the start and end. Could you please review the design again? or maybe i didn't get you

  0