Responsive solution using HTML, CSS and vanilla JavaScript

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

Proudest achievement: I’m most proud of transforming the mobile share popup into a full-width bar that integrates the share button on top — without using absolute positioning hacks or hiding the entire profile. Instead of fighting the layout, I reused the .profile container as the popup bar itself using .profile.active and smart z-index layering. This kept the DOM clean, reduced JavaScript complexity, and delivered a pixel-perfect, performant result that matches the design exactly. Next time, I’d:

• Use CSS custom properties from the start for colours (e.g., --color-primary, --color-popup) to make theming easier.
• Add smooth transitions (opacity, transform) to the popup open/close for a more polished feel.

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

Challenge - How I Solved It

1. Mobile popup replacing profile bar: "Initially used position: absolute with negative offsets (left: -17.5rem) — fragile and broke on different screen sizes.

• Fixed by: making .profile.active the dark bar, hiding .avatar and .info, and keeping .share-btn inside with z-index: 10."

2. Share button disappearing under popup: The button was visually “buried.”

• Fixed with: position: relative; z-index: 10; and white icon via filter: brightness(0) invert(1).

3. Text not wrapping like the design: Used padding-right — didn’t control line breaks.

• Switched to max-width: 30ch (title) and 70ch (paragraph) — perfect control using font-relative units.

4. Triangle pointer on mobile: Still appeared and broke layout.

• Removed with: .share-popup::after { display: none; } in media query.

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

I want targeted, expert feedback on responsiveness — my layout wasn’t truly responsive across all devices. Here’s what I need help with:

1. Breakpoint Strategy: I used two media query at max-width: 767px and max-width:375px.

• Question: Should I add multiple breakpoint or use clamp() / min() for fluid scaling?

2. Image Height on Mobile

• Question: Should I use vh, clamp(180px, 50vw, 220px), or let it scale with height: auto + aspect-ratio?

3. Share Button Spacing on Ultra-Small Screens

• Question: How can I dynamically adjust gap without multiple media queries?

Live Site: https://frontend-mentor-article-preview-solut.netlify.app

GitHub: https://github.com/LaDonaAmor/article-preview-component-master