Social links profile

Community feedback

• 

  P

  Fadi Aljohari•230

  @fadialjawhary0Posted 5 months ago

  This is great. I got few suggestions for you.

  1- Make the button's cursor as pointer by using this CSS property "cursor: 'pointer' "

  2- Make the <a> </a> tags to have this " target='_blank' " like this <a href="Link here" target="_blank"> </a>. This will make the website be opened in a new tab.

  3- On small screen sizes (around 450px width and less), the profile picture is not centered in the middle, try to make it in the middle by either using Flexbox for all the items (containers), with flexDirection: 'column' and alignItems: 'center', or by using margin: 0 auto; Try to learn and use Flexbox.

  Great job :).

  Marked as helpful

  1

  ---

  

  Kweku_Felix•90

  @Black1ukPosted 5 months ago

  okay, thank you very much.@fadialjawhary0

  0

  

  Ho Van Quoc•20

  @hvQuoc133Posted 5 months ago

  @fadialjawhary0 Yes, I changed it according to your wishes, but my avatar still couldn't be centered using "flexDirection: 'column' and AlignItems: 'center' or using margin: 0 auto" so I used marginLeft

  0

  

  P

  Fadi Aljohari•230

  @fadialjawhary0Posted 5 months ago

  @hvQuoc133 I just checked, you are currently using "margin: 0 auto 20px auto" on the div with classname imgMain, which is similar to "margin: 0 auto;" but yours also gives a margin to the bottom, and the image is being centered in the middle correctly. :)

  In order to use flexbox, you have to follow these 4 steps.

  1- to the div with classname "container", add these styles: display: flex flex-direction: column align-items: center

  2- to the div with classname "btnLink", add these styles: width: 100% (it gets affected by the align-items: center, so we need to fix it's width to 100%)

  3- to the div with classname "imgMain", remove the styles for the margin, overflow, and border-radius. delete them.

  4- add border-radius: 50% to the image directly instead

  Quick note: apply the cursor: pointer to the "button" itself, not to the <a> tag.

  Like that, it should be working fine :)

  0

  

  Ho Van Quoc•20

  @hvQuoc133Posted 5 months ago

  @fadialjawhary0 Thank you very much, looking forward to teaching you next time <3

  1
• 

  Abdur Rahman•70

  @nuraf9607Posted 5 months ago

  For semantics, You could consider using the main tag for the primary content container, and also instead of using h4, it would be best to use the p tag instead, after all this isn't a heading. lastly, change h2 to h1 because that's the primary text that people would focus on while visiting the page, I hope I helped you.

  Marked as helpful

  0

  ---

  

  Kweku_Felix•90

  @Black1ukPosted 5 months ago

  okay, thank you@nuraf9607

  1

  

  Ho Van Quoc•20

  @hvQuoc133Posted 5 months ago

  @nuraf9607 Yes, I have revised it according to your request. Thank you for your feedback

  1