Skip to content
Submitted over 2 years ago

Responsive Article Preview Component

Ankush Badgujar•150
@badgujarankush
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

Faced some problem in overlapping the content over image and positioning the share popup div. Tried my best to replicate the design. Any feedback would be helpful to learn about efficient method for positioning of popup card.

Community feedback

  • Darrick Fauvel•490
    @DarrickFauvelPosted over 2 years ago

    @badgujarankush I noticed in your HTML that your element up one line, into the very bottom of the <body> element, it will become conventional and within common practice. 👍 Another conventional location would be the within the <head> element, but using the defer attribute.

    Here is a good Stack Overflow post addressing this very issue. Where should I put tags in HTML markup?

    I hope this is helpful. 😊

    0
    Ankush Badgujar•150
    @badgujarankushPosted over 2 years ago

    @DarrickFauvel Thank you for the feedback Darrick!

    0
  • Darrick Fauvel•490
    @DarrickFauvelPosted over 2 years ago

    Hi @badgujarankush, 👋

    If you would like to address the "All page content should be contained by landmarks"⚠️warning issue in the accessibility report, you can place the attribution div inside a <footer> element.

    "It is best practice to contain all content excepting skip links, within distinct regions such as the header, nav, main, and footer." more info

    I hope this is helpful. 😊

    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