faq accordion trouble in showing the right one
Design comparison
Solution retrospective
Guys, i made some modification to the code saved succesfully in github(ex the right directory for the images since i'm not still able to create a folder or the js modification for not sliding up a div when opened :)) but the live version still goes on the previous version that i uploaded...am i missing something? thank you! oh, and what size is better to use instead of pixels?Ciao!
Community feedback
- @skyv26Posted almost 3 years ago
Hi! Mario, Congrats you did it. Even while I was working on it, I also face so many problems. I noticed few issues on which I'm going to share my views/tips/suggestion.
-
Your Faq Question answer container is not aligned properly, even the last 15% of portion is out of the parent container. (Align it properly).
-
Your orange box is not at its right position in desktop mode. It is not major one but may be tricky one.
-
In mobile view your question answer just take full width of screen which results in bad user experience. (Fix it)
-
There is purple space at bottom, I think you don't know how to mix two color and apply mixed color background (Tip: Use linear-gradient with background property in css) Gradient Generator <-- check this link
I hope my suggestion, tips will help you.
Good Luck
Marked as helpful0 -
- @carlwickerPosted almost 3 years ago
Hey ya, good job so far... you're not far off getting it right.
- firstly I'd focus on getting your panel centred on the page, you could achieve this with a few amends to the body CSS and a bit of flexbox centring and a height: 100vh.
- the floating @box also doesn't appear in the right place when you resize the page, consider again using flex and losing the left and top property and replacing it with a negative margin-left and a positive margin top.
- accordion FAQ breaks on mobile.
Not sure what's going on with your git problems.
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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