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 card made with html, css and javascript

DInosMpo 210

@DinosMpo

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


Hello my friends, feel free to leave a comment. Tell me any mistakes that i made. It was a little bit tricky and i would like to see a better solution. Thanks for your time

Community feedback

Hyron 5,870

@hyrongennike

Posted

Hi @DinosMpo,

congrats on completing the challenge

The only suggestion I have it add the following.

.faq-container {
    max-width: 920px;
    min-width: 688px;
    width: 100%;
    height: 450px;
    margin: 0px auto;
    background-color: white;
    border-radius: 30px;
    display: flex;
    justify-content: space-between;
}

it's just the height: 450px and justify-content: space-between. You can also add the following to make the image and faq section equal widths.

.faq-container > div {
    flex: 1;
}

remove the width on the .container-question {width: 280px; } then add the following.

.faq-section {
    padding: 1rem 3rem;
}

Hope this is helpful.

Marked as helpful

0

DInosMpo 210

@DinosMpo

Posted

@hyrongennike thanks my friend i will try it out

0
Hyron 5,870

@hyrongennike

Posted

@DinosMpo okay🙌

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