@TedJenkler
Posted
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 helpful
@amjadsh97
Posted
@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);
}
});
}
}, []);
@TedJenkler
Posted
I 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.
