Design comparison
Solution retrospective
It took some time to find a suitable solution for the show-hide functionality of the button, which fulfils the popup display for mobile and desktop and also changes the colour of the button. I'm pleased to have found a way that suits the design.
What challenges did you encounter, and how did you overcome them?How to catch the button-color?
What I did in the end: Instead of including an SVG as src in the img-tag, I inserted the SVG directly into the button element. This allowed me to address the fill value directly in the CSS.
How to create the popup-arrow?
Found this ducumentation popup with arrow and used it as a guide.
What specific areas of your project would you like help with?I am happy about any kind of suggestions for improvement.
Community feedback
- @Ejiro-FrancesPosted 29 days ago
Thank you for sharing the challenges you encountered and how you overcame them. I appreciate your willingness to share your experiences and expertise, and I plan to use this method to improve my code base. I especially appreciate your including the documentation illustrating how to use the pop-up arrow. They make it easier to understand the concepts and how to apply them. Your article looks excellent, but I did notice that it doesn't appear to be responsive on a tablet. I think it would be helpful if you could address this issue in a future update.
0@MarenOelixtownPosted 29 days agoThanks so much @Ejiro-Frances for your feedback and pointing that 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