Design comparison
Solution retrospective
I learn a new skills for state management with context api. I will try to use another approach for that to improve my skills more.
Community feedback
- @TedJenklerPosted 3 months ago
Nice project! I really like this one because it offers so many possibilities of learning.
However, I noticed a few areas for improvement. While the app looks good on desktop, it breaks at other breakpoints. Consider spending more time on the CSS to make it look better and responsive across all devices.
Currently, the extra category (black one) isn’t scrollable/viewable, so the user can’t access it. Additionally, some icons fail to import properly. With some extra effort on the CSS, you could turn this into a really impressive portfolio piece.
Hope this was helpful.
Best, Teodor
Marked as helpful1@amjadsh97Posted 3 months ago@TedJenkler First of all thank you for your valuable feedback! appreciate it! I fixed the broken icon but I have some questions on your comment:
- What do you mean by " the extra category (black one) isn’t scrollable / viewable"?
- about the breakpoints, which devices you mean? if you mean mobile we have to refresh the website if you open it from desktop device. because i added this code for mobile only. For example:
useEffect(() => { if (innerWidth < 768) { document.querySelectorAll(".comment").forEach(elem => { const descriptionElement = elem.querySelector(".comment-description"); if (descriptionElement) { elem.append(descriptionElement); } }); } }, []);
1@TedJenklerPosted 3 months agoI want to clarify that on desktop, the "Live" category overflows and gets cut off.(You have 4 categories)
I recommend using media queries with display: hidden to handle responsivness instead of using JavaScript for styling. However, I checked on my phone, and you are correct—the site is responsive on the device, just not in dev tools.
0
Please log in to post a comment
Log in with GitHubJoin 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