FAQ accordion card

Community feedback

• 

  Yadhavan Prabhakar•460

  @yadprabPosted almost 4 years ago

  Hey I figured it out First, remove the Wrap FAQ Section faq is your container so you don't need wrap faq put text and image wrap under faq section

  Then in CSS HTML{ height:100% } body tag Width:100% display: flex Justifiy-content:center Align-items: center background: gardient;

  .faq margin:2em Width:100%, Max-width:480px display: flex Justifiy-content:center Align-items: center Flex-direction:column Background-color:#fff; Adjust images according to current state

  My suggestion don't use absolute for positioning only use for overlay stuff Then for icon don't use image clickable thing needs to be button and inside button put inline SVG

  Nature of accordion is to grow while showing answer I checked many real accordions they act same way so don't worry Forget about absolute and relative Learn CSS grid and flexbox

  If any doubts feel free to ask me

  1

  ---

  

  Marcin•570

  @FrontmaniaacPosted almost 4 years ago

  You're right about all of that, especially about the images but for now i will stick to my solution and will do an other project. I am familiar with flexbox and grid , just have to sharpen my skills at them yet. Thanks for the overall help :)

  1

  

  Yadhavan Prabhakar•460

  @yadprabPosted almost 4 years ago

  @Frontmaniaac keep learning All the best 🙌

  1
• 

  Yadhavan Prabhakar•460

  @yadprabPosted almost 4 years ago

  This happens because of the body's 100vh height I also faced this problem tbh vh sucks remove the 100vh. Block elements always take up the content width so for mobile don't set the container height use padding and margin to align image section and FAQ section. For width set max-width to 380px like that

  0

  ---

  

  Marcin•570

  @FrontmaniaacPosted almost 4 years ago

  I've put the whole FAQ in a section and it seems to work as it should. It still makes the div bigger while opening(which was intended) but at least it doesn't move. Thank's for your comment :)

  0

  

  Yadhavan Prabhakar•460

  @yadprabPosted almost 4 years ago

  @Frontmaniaac hey give me some time I will check it

  0