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 FLEXBOX and GRID

Gesiere 780

@Gesiere

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


Would love any critisim on this project. Thank you.

Community feedback

@Clinton-dev

Posted

The illustration box desktop isn't at the correct position, you can try transferring it to .box-image container as illustration-box is positioned relative to the nearest positioned ancestor

1

Gesiere 780

@Gesiere

Posted

@Clinton-dev thanks for the feedback would do that.

0
Gesiere 780

@Gesiere

Posted

@Clinton-dev I have overflow hidden in my section center elements so when I do that the box overflow is hidden.

0

@steventoben

Posted

There's lots of problems with your html markup. You're setting font size in pixels which is bad practice. Your main has a class name "section". An img element always needs an alt for accessibility reasons. Your section element is not a section element, you should make it a div. Also the use of grid on your main component is completely unnecessary. You should try to stay away from absolute positioning, especially with weird magic numbers that make no sense. It's good that you're using rem, but because you set the root font-size to 12 your rem values end up becoming really weird numbers with like 4 decimal places. You have a div with a classname "header" which holds an h1 element. You don't need to wrap that h1 component. The use of flex for the whole accordion area is unnecessary and leads to problems with the entire component changing size on click. The use of article is incorrect semantically, for accordions look into summary and details html elements. There's also really no need to be wrapping your p elements with divs that are displaying as flex.

1

Gesiere 780

@Gesiere

Posted

@steventoben ok that's a lot, would look into it thank you.

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