Skip to content
Submitted over 3 years ago

Article Preview Component with HTML, SCSS and jQuery

Samuel Darkwah Manu•105
@sammyhawkrad
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

The popup share element is position absolutely for desktop view, and this is solely based on my screen size, I don't know how to will be positioned on bigger screens. So if the is a way to position an element to scale with/ move with another element, someone kindly show me the way. Thanks.

Community feedback

  • Patrick•14,265
    @palgrammingPosted over 3 years ago

    you are attaching your popup menu to the wrong element you should nest it inside your share-button div

    Marked as helpful
    0
  • Grace•31,270
    @grace-snowPosted over 3 years ago

    Hi Sammy

    It's really important to use interactive elements for interactive behaviour. If ever you want to attach an event listener to an element that is not natively interactive in html, pause and rethink. It's a sign something is wrong.

    I think youre making this more difficult for yourself partly by using jquery and partly by changing inline styles with javascript. It is much better to toggle Classes with javascript and let css handle all the styling.

    At the moment this opens but I can't close it again (viewing on mobile) so try and implement changes if you can

    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