Skip to content
Submitted 4 months ago

Responsive article preview with functional share button

sass/scss
P
Haley Underwood•190
@underhr
A solution to the Article preview component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am most proud of getting the share button positioned properly. I don't usually do sort of abstract positioning like that, so I started out with no idea of how to do so, or how to display it so differently when the page was resized, but it was much easier than I imagined it would be. I just needed to use relative & absolute positioning, & was able to move it right above the share button.

What challenges did you encounter, and how did you overcome them?

I wasn't sure how to change the layout when the screen was resized for the share block, but I asked chat gpt (just so I could quickly get the bits of info that I'm missing, I try not to rely on it too much) & I learned about the 'resize' event, & my problem was solved in no time.

What specific areas of your project would you like help with?

As usual, anything you think I could improve on, be more efficient, etc. Any feedback is helpful & welcome! Thanks :)

Code

Please log in to post a comment

Log in

Community feedback

  • Marcos Travaglini•6,210
    @Blackpachamame

    Hey your solution is amazing! 🤩

    📌 Some accessibility and semantics recommendations for your HTML

    • To improve the semantics of your HTML, you can change your <div class="container"> to a <main class="container">
    • Use min-height and max-width, this will help the content stretch or shrink if you need to. Unlike height and width which can cause your content to be cut off on certain screens. For example, use min-height: 100vh instead of height: 100vh
    • Try to avoid using id to style your elements, it is best to do it through classes
    Marked as helpful

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