Skip to content
Submitted about 3 years ago

Mobil-First Design with CSS Flexbox/HTML5/JS

Aidan Wright•30
@greasypicadillo
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello All,

Hope you are well. This is by no means a pixel perfect recreation but I did have some fun with it.

Some glaring problems for me: The share icon button looks a tad elliptical instead of nice and perfectly round Share icon does not change color properly The tooltip on the desktop design does not properly toggle off (this one really bugged me because I can't figure what changes to make to my script to make it function properly. Should be under the showDesktopSocial() if you can tell me where I went wrong.

Also would love some tips for Unobtrusive Javascript! read a bit about it and want to implement on future projects.

Thanks so much! I really appreciate anyone reading this and replying with constructive criticism!

Best Regards, Aidan Wright

Community feedback

  • Michael•430
    @mikester380Posted about 3 years ago

    Hey Aidan, congratulations on completing this challenge.

    You can try setting a width and height on the share icon and using border-radius: 50%; on it to make it a perfect circle.

    Also, try reducing the height of the component so it can match the given design and use flexbox to center it vertically on the screen.

    And as for the tool tip you complained about, I was unable to view your source code on github and give you a possible solution. Try fixing that so I can try my best to help you

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord