Back

Article Preview Component

A component that shows an article preview, with different share modals that differ considerably enough for different screen sizes, challenge by Frontend Mentor.

---

Links

• Website
• Source

Media

Desktop Preview

Mobile Preview

The challenge

Users should be able to:

• View the optimal layout for the component depending on their device’s screen size
• See the social media share links when they click the share icon, different for each screen size

What I learned

• I learned the over-convoluted way to show different elements on different screen sizes. (Duplicate the elements and use v-if to show/hide them based on screen sizes.)
• Astro Islands (enable interactivity only when needed, for the case of the author display)

Useful resources

• Bubble Text CSS - CSS for the bubble text for the share view on desktop.