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 with CSS Flex box and JS

TK-PJ06ā€¢ 150

@TK-PJ06

Desktop design screenshot for the FAQ accordion coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I have a problem regarding the icon of the second FAQ, it doesn't respond to the media queries. Advices and corrections are welcome.

Community feedback

Daniel šŸ›øā€¢ 44,230

@danielmrz-dev

Posted

Hello @TK-PJ06!

Your project looks great!

I have one suggestion for you to improve it even more:

  • Using margin is not the best option to center an element. Here's a very efficient (and better) way to place an element in the middle of the page both vertically and horizontally:

šŸ“Œ Apply this to the body (in order to work properly, don't use position or margins):

body {
    min-height: 100vh;
    display: flex;  /* it works with grid too  */
    justify-content: center;
    align-items: center;
}

I hope it helps!

Other than that, great job!

Marked as helpful

0

TK-PJ06ā€¢ 150

@TK-PJ06

Posted

@danielmrz-devThank you very much for your suggestion!! Visting your profile I noticed that you use SASS and Tailwind, I would like to learn those two frameworks but I'm finding it difficult to find videos or any other kind of sources to learn them, do you know where I can find something about that?

1
Daniel šŸ›øā€¢ 44,230

@danielmrz-dev

Posted

@TK-PJ06

I don't know where you can find free content about those, but if I can give you some advice, would be to learn just pure CSS. If you are good at CSS, you will be good at SASS and Tailwind.

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