Frontend Mentor | Responsive FAQ Accordion Card using React coding challenge solution

Abdul Khalid 🚀• 72,160

@0xabdulkhalid

Posted 9 months ago

Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have other recommendations regarding your code that I believe will be of great interest to you.

ACCORDION 🔴 :

The best way to go with creating the accordion elements in this challenge would be with the details and summary elements (or perhaps a combination of buttons and other elements).

They are already fairly accessible and provided a clean, semantic way to create accordion elements. I see you have used the div & p elements for the accordions, but those are not interactive or accessible by keyboard, so not all users will be able to open the accordions to see the content inside.

MDN's reference is a great place to start learning about the details and summary elements if you are interested.

If you have any questions or need further clarification, you can always check out my submission for this challenge and/or feel free to reach out to me.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

Marked as helpful

Sarah Fatima• 170

@SarahFatima81

Posted 9 months ago

Hello AbdulKhalid,

Thank you very much for taking the time to provide feedback to my solution. I will keep your suggestions in mind. I checked your solution and your solution looks great.

Thank you.

Carl• 815

@CarlHumm

Posted 9 months ago

Hello there, good job on the project, it looks like the design

The Accordion Problem

For your .accordion-card you have given a height of 31.25rem (500px). This is a fixed height. If you expand all the accordions they expand the columns total height to 610px. As 610px is more than the 500px height limitation, they overflow the container.

You are using CSS Grid so both columns are even. So the left side which contains your image is also 610px in height. Your image has been told to take up 100% height. The default vertical positioning (background-position-y) is set to center. Because the container has grown beyond the .accordion-card the center is now visibly much lower.

The Solution

To solve this you can remove the fixed height from the container, and instead place a min-height - allowing it to grow with content. If you do this, I would also suggest adding some padding-bottom to the .faqs which is currently set to 0.

Good luck on your next project, and keep up the learning :)

Marked as helpful

Sarah Fatima• 170

@SarahFatima81

Posted 9 months ago

Hello Carl,

Thank you very much for taking the time to provide feedback to my solution. I did change the accordion height to min-height and added padding to faqs and this resolved the issue of content overflow in the desktop design. However, in the mobile design, the image still shrinks on expanding the accordion. Your insight on this issue will be greatly appreciated.

Thank you.

Carl• 815

@CarlHumm

Posted 9 months ago

@SarahFatima81

Abdul Khalid has some great advice and an interesting solution to look at.

TL;DR - Use grid-template-rows: 90px auto, or min-height:90px to .image-wrapper so CSS Grid stops stealing space for .faqs or alternatively use absolute positioning to place your image top and center and then use margin or padding to space apart from card content

Why your image shrinks

Your background image is an empty div which technically has 0 height. It has been given height by the left over space from display: grid on .accordion-card. On mobile you've set your accordion-card columns to 1fr. This makes each column sit on a new row, but you haven't set any value for those rows height. By default, implicitly created rows will have their grid-template-row property set to auto and CSS Grid will automatically fill the remaining space for that container giving your image row a base height. source

Your FAQ section has a real minimum height of which it can't shrink below. This is the total height of the elements inside including spacing/measurement values like margin, line-height, padding, font-size, etc.

Your image on the other hand is empty and has no explicit height so CSS grid sees it as remaining space that is available to use.

As you expand your accordion you're adding height to the FAQ row. Because CSS Grid believes it still has room available to fit the content within the same grid dimensions, it shrinks your .image-wrapper's row height and adds that height to the .faqs.

As your image size is relative to the size of that rows height, as you expand an accordion and the row shrinks, so does your image. height: 400% is now 400% of a smaller number, hence a smaller image.

Tell CSS Grid the height of your image/row

You could tell CSS Grid to respect that column/rows height by setting a value via min-height or grid-template-rows like this

Or you could just use position absolute

There are many different ways to accomplish this challenge. Abdul Khalid has posted a good one making use of absolutely positioned pseudo elements with multiple background images.

It can be difficult to understand and I'm not the best at explaining ...or formatting, best of luck!

Marked as helpful

Sarah Fatima• 170

@SarahFatima81

Posted 9 months ago

@CarlHumm

Hello,

This worked! Thank you! Abdul Khalid's solution is great too!

Responsive FAQ Accordion Card using React

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community