FAQ accordion card

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

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