Good work on this one. But a really small issue, there is an appearance of scrollbar at the bottom and it was cause by the first container of your image, or the container of your slider. To fix this, just add a width: 100% to it so that, your declared overflow will be applied and I don't know if you are supposed to display to slider at once? Since right now, there is the top slider and bottom slider appearance, is that what the challenge says? But still, slider functions well^
Design Comparison
SolutionDesign
Report
0Accessibility
issues1HTML
issues
Aaron Stroud's questions for the community
I'm looking for feedback on my React code and anything else that stands out (good or bad).
This is another refactored project. I submitted a HTML/CSS/JS solution last year.
Community Feedback
- 1
- 0
@pikamart Thanks for the feedback Pikamart. Sorry for the late reply, been under the weather.
What browser are you seeing that scrollbar in? I can't replicate it on my Mac with chrome/safari/firefox or on my iPhone.
Looks like my enhanced submission would benefit from some explanatory text in between the slider components.
The component defaults to the small size, but you can also pass a prop of large=true to get the full size (which is responsive).
I figured including both on the same page makes a better demo. I placed the large component at the top for the design comparison, but it sounds like the page would benefit from some clarifying text between the sliders.
- 1
Hi, Aaron Stroud! ๐
Nice to see you refactor another challenge! ๐ Well done on this one! ๐ The slider works well and the page looks good and is responsive, too. ๐
Like pikamart mentioned, there is a horizontal scroll bar that appears along the bottom of the page that you might want to get rid of.
Also, I'm able to scroll down past the main content of the page and there's seems to some sort of extra section at the bottom of the page that contains the mobile layout of the slider surrounded by a grey background. Not sure what that's doing there! ๐ง
Anyways, keep coding (and happy coding, too)! ๐
- 1
@ApplePieGiraffe Thanks for the feedback ApplePieGiraffe. Sorry for the late reply, been under the weather.
That gray background is the same one used used in the Figma designs. I thought it contrasted well and since I was building a component with two specific sizes, I wanted to include both on the same page. I'll be adding some clarifying text between them.
I saw in the newsletter that you tackled the invoice challenge with Next.js (IIRC). Now that I'm on the mend, I plan to check that out. I've been looking to use Next.js on a project.
- 1
@astroud
Oh, okayโthat makes more sense! ๐
Yeah, Next.js is pretty fun and provides a great developer experienceโI think it makes building sites in React a lot nicer! ๐
Look forward to your next project! ๐
PGive some feedback to astroud about their solution
Join our Slack community
Join over 45,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!