Flexbox and SASS, some JS

Hi,

I was about to let you know about the image being cut off on mobile too ☺

Looking at your html, the button should be the click handler. I would recommend wrapping the question text and image inside the button. This would make your solution more accessible.

I'll also make you aware of the importance of heading levels going in order. You need one h1 per page. Subsequent headings should then be h2s. If you wrap the question in a button though you may not need need headings at all

Take a look at this site for a good pattern [inclusive components] (https://inclusive-components.design/collapsible-sections/)

Hi @mbart13, they are quite challenging, I agree!

I struggled with the images myself and I'm still not quite sure, but regarding your question about the box image - try offsetting that element from the top instead of the bottom.

Another issue though - if you open this on mobile, the image is cut off at the top. I can see you posted on Slack, I'll send you screenshots of what I mean.

Most importantly though (and the same mistake I made with this challenge) is that it's not accessible, because someone using a keyboard would not be able to access the accordions. The easiest way to fix that is to use buttons instead of divs as the clickable element.

Hope this helps :)

Also, with alt text, leave it blank on items like icons alt="" Once you've wrapped the question in a button. At the moment screenreaders would read the heading, then say "button, arrow" which doesn't make sense. Best if the arrow is skipped and the question read out as the button text.

This whole card could be a section, but swap the nested section for a div. That will fix your html Validation error

I think I fixed most of the issues, accordion is now accesible with keyboard. I also added tablet view

thank you both