Design comparison
Solution retrospective
Well, this challenge gave me a run for my money. I struggled through adding the active states. I was unable to add the down arrow on the pop-up in the desktop view when its in active state. Any recommendations will be highly appreciated.
However, I learnt J-Query today and was able to implement it for this project, which was pretty cool. It literary shortened my javascript code to two lines! 😁😁.
Looking to improve and shorten my css further.
Community feedback
- @viniciusdsv93Posted almost 3 years ago
Hello Abby! How are you doing? My name is Vinícius and i'm from Brazil. I managed to create a small arrow below the active state box by creating a div below with a square format and then making it rotate 45 degrees, so i positioned it a few pixels up in order to get behind the box. By doing that, you can simulate a "down arrow" by using a half of a rotated square. Got it?
You can create a father div, giving it a display flex, flex-direction column, putting two divs inside it, being the first one the actual box and the second is going to be the rotated square.
0@AbbyNyakaraPosted almost 3 years agoHi Vinicius, that makes perfect sense. So its basically a rotated square box with a negative Z-index. Ill implement that and see how it goes. Thanks a lot!
0@viniciusdsv93Posted almost 3 years ago@AbigaelN2021 You're welcome, Abby! Let me know if you have any problems with that.
0
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