Design comparison
Solution retrospective
I found a notes extension for VS Code that helped me organize what to do. Next time, I’ll start with a more detailed step-by-step plan and implement things gradually.
What challenges did you encounter, and how did you overcome them?Biggest challenge: Lightbox Component/Effect - It wasn’t difficult to implement, but I had to pause for a bit to think and reflect on how to do it. In the end, I found the code repetitive, but it worked well.
What specific areas of your project would you like help with?How to think and plan the components? My impression is that they ended up too fragmented, but there's a logic behind them.
Community feedback
- @Alex-Archer-IPosted 4 months ago
Hi!
I have notice that the arrow buttons on the image isn't positioned on the center. There are two reasons for it.
At first when you use
top: 50%the element located just behind the 50% line i.e. the top of the element hits the middle but not the center. To fix it you should addtransform: translateY(-50%)property.The second is that you use that whole container (image + thumbnails) as relative container, so it's more difficult to center them inside the image. So I suggest you to separate image with arrows and thumbnails as different components.
Alas, I can't see the source code to answer your question about the components structure - the link leads to 404.
But hope you'll still find that helpful =)
Congrats with difficult challenge, good luck =)
Marked as helpful1@aecio-netoPosted 3 months ago@Alex-Archer-I
Thanks for taking the time to analyze my code. I'll check it out.
1
Please log in to post a comment
Log in with GitHub
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