Responsive and Accessible Accordion Card using HTML, SASS and JS

Community feedback

• 

  Nenad Cosovic•360

  @nenadmnePosted almost 2 years ago

  Container has overflow:hidden so left half of your box is hidden outside of container, because its position is relative to parent who has hidden overflow. Simple solution would be that parent for the box image is body, so its wraped out of overflow. body::after There is probably 20 more solutions arround just pointing out the most newbie one

  0

  ---

  

  Maame Yaa Serwaa Bona-Mensa•70

  @mbonamensaPosted almost 2 years ago

  @nenadmne Yeah, I tried this, but on the main which is outside of the overflow: hidden and the absolute positioning does not stay in one place when the screen is resized.

  0

  

  Nenad Cosovic•360

  @nenadmnePosted almost 2 years ago

  @mbonamensa it will always change as long as you dont make specific width and height to the box parent container. Why? Because you say i want box to be left:-68px from my parent container. And when you resize parent container it will move diferently around. IF your parent has 300px width or 600px width is making difference. So you need to make strict width and height of .container and it will always be in same place in resposive way. Curently your width is at 85% width of the screen.

  0

  

  Maame Yaa Serwaa Bona-Mensa•70

  @mbonamensaPosted almost 2 years ago

  @nenadmne Ohh okay, this makes sense. That means my width has to be fixed which will affect responsiveness as well, no?

  0

  

  Nenad Cosovic•360

  @nenadmnePosted almost 2 years ago

  @mbonamensa yes, fix the width/height. No units that are changable, anything changable like % will change box too becuz its dependent on them.

  0

  

  Maame Yaa Serwaa Bona-Mensa•70

  @mbonamensaPosted almost 2 years ago

  @nenadmne Right, thank you for your help!

  0