Faq accordion with CSS FLEXBOX and GRID

Community feedback

• 

  clinton wambugu•455

  @Clinton-devPosted almost 4 years ago

  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

  @GesierePosted almost 4 years ago

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

  0

  

  Gesiere•780

  @GesierePosted almost 4 years ago

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

  0
• 

  Steven Toben•750

  @steventobenPosted almost 4 years ago

  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

  @GesierePosted almost 4 years ago

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

  0