Responsive Article Preview Component with BEM & Flexbo

Solution retrospective
I’m proud of how I implemented BEM (Block Element Modifier) correctly, making my CSS more structured, reusable, and easier to maintain. I’m also particularly happy with how the tooltip smoothly follows the button when resizing the window, ensuring a seamless user experience. This project helped me strengthen my JavaScript event handling, especially for managing responsive interactions.
Next time, I would focus on optimizing event listeners further to improve performance on resize events. I’d also explore using CSS animations to enhance the tooltip’s appearance and transitions for a more polished UI.
What challenges did you encounter, and how did you overcome them?One of the biggest challenges I faced was dealing with window.innerWidth behaving inconsistently near the breakpoint range. When resizing the window pixel by pixel, I noticed that innerWidth sometimes jumped unpredictably, especially between 418px and 496px (break point is set at 31rem=496px) This caused the tooltip to not transition correctly to the bottom position, and the user-info didn’t always hide as expected.
Sometimes in the dev tools the width was 470px but when I console.log innerWidth, it printed 510px...
What specific areas of your project would you like help with?One area I’d like to improve is handling window.innerWidth inconsistencies near breakpoints.
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@anamaydev
Hey @martinianol, I went through your code and really liked it! I noticed you've used SASS/SCSS, and I've been looking for good resources to learn it. Could you recommend some?
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