CSS flex Box, javascript event listener...

Community feedback

• 

  P

  Daniel 🛸•44,780

  @danielmrz-devPosted 12 months ago

  Hello @Deepu23456!

  Your solution looks excelent!

  I have just one suggestion:

  📌 To improve semantic clarity, opt for <h1> over <h3> for your main title.

  It's more than just text size — it's about structuring your content effectively:

  • <h1> to <h6> are used to define HTML headings, with <h1> being the most significant.
  • Stick to one <h1> per page for the main title, and maintain the titles hierarchy with <h1>, <h2> <h3>, and so on.

  While these adjustments might not alter the visual appearance much, they significantly enhance semantic clarity, SEO optimization, and accessibility.

  Hope this suggestion proves helpful! Keep up the great work!

  Marked as helpful

  0
• 

  Tharun Raj•1,330

  @Code-BeakerPosted 12 months ago

  Hi there, you've done a great job regarding this solution.

  Here are some issues that I came across in your solution:

  • It seems like there is a white box below the pop-up and also the popup is not in the right position.
  • On mobile, the pop-up does not have proper width. It overflows the container.

  Here's how you can improve your code in this one:

  • instead of creating a share-container element, place the share inside the profile-section itself. Then give the profile-section the following properties:

  .profile-section {
  position: relative;
  }
  

  • then give the share element:

  .share {
  position: absolute;
  right: 0;
  bottom: 25px; /* change this value if you want */
  }
  

  There is no need of the share-container.

  • I see that you've tried to create the little triangle that joins it with the share icon. But it's actually blocking the content beneath it.

  These are small issues that can be solved to make the website better. I hope you look into the problem and understand how to fix it.

  Hope this helps you improve your solution!

  0