Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

faq accordion trouble in showing the right one

@mario-santoro89

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

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

Aakash Verma 6,690

@skyv26

Posted

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.

  1. Your Faq Question answer container is not aligned properly, even the last 15% of portion is out of the parent container. (Align it properly).

  2. Your orange box is not at its right position in desktop mode. It is not major one but may be tricky one.

  3. In mobile view your question answer just take full width of screen which results in bad user experience. (Fix it)

  4. 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 helpful

0
Carl Wicker 1,055

@carlwicker

Posted

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 helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

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