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 card using HTML, CSS and JavaScript.

@Godfredgameli

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


Kindly let me know how I can make the image stable when the question is clicked.

Community feedback

Adam 430

@aemann2

Posted

Hi Godfred,

It's hard to tell exactly where the problem is coming from, but I think it might be because you've got the left and right sides both wrapped in the .row class. When you open the accordions, it's pushing the padding down for both sections.

I think the big thing you need to do is to take everything that's nested under body and un-nest it in your CSS. Generally, you should avoid nesting classes within elements and elements within classes, as it sets up specificity problems. If you're going to set a style for an element, it should be because you want all elements to have that style globally. Classes/elements that are nested under other classes / elements have a different weight than classes that are not nested, which can cause your code to behave strangely.

SCSS makes it easy to nest things, and it can be a handy way to structure blocks of code. Here's a methodology I use to nest classes in sections: http://getbem.com/introduction/

1

@Godfredgameli

Posted

Thanks for the feedback. I will work on it.

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