Responsive FAQ Accordion page with HTML, CSS and JS

Hi there!

The reason why your content grows upwards instead of down is because of transform: translate(-50%, -50%) and left: 50%; top: 50%.

As you know this command will center your content perfectly on both the horizontal and vertical axis, and it will do this relative to the space available using percentages.

When you click questions and .answers gets given display: flex your .card has more content, and so the height grows. In-order to preserve the current alignment and keep the box center, instead of growing downwards the content grows middle out to ensure even margins top and bottom.

Solution?

Well there are plenty of different ways you could center your content. You don't need to use position: absolute, or transform: translate. For instance, you could:

1. Method 1 : Align the box to the center using margin-left: auto and margin-right: auto and then apply a negative margin-top for overlap.
2. Method 2 : Nest .card within <main> and make it a flex container with justify-content: center, then position the .card to overlap using margin, top or translateY.
3. Method 3 : Similar to before, but use grid and overlap by spanning rows.

Hope this helps, and good luck on your next project/challenge!