FAQ-Accordion-Card

Please log in to post a comment
Log in with GitHubCommunity feedback
- @devmor-j
Great 🏆🎇 The functionality is there and it works. But there are some minor styling issues 🎨. If you like CSS refactoring (which I highly recommend), These are my suggestions:
1️⃣ main content should fill the whole screen space (because it has a gradient):
/* add these properties to these rules */ main { ... min-height: 100vh; align-content: center; padding: 2rem; ... } .main { ... /* 50rem is the total width of the faq card, adjust if not happy with it */ width: min(100%, 50rem); ... }
📝 remove these extra height properties:
html { height: 100%; } body { height: 100%; }
2️⃣ in mobile view there is not enough space to show decorative image and content side by side. so either remove it for screens below '40rem' or stack them on top of each other (I personally have removed it):
@media (max-width: 40rem) { .image { display: none; } .faqs { width: 100%; } }
3️⃣ class of
.faqs
has a complex padding and specially on mobile view causes a big empty gap next to arrows, so maybe '2rem' or '3rem' should suffice:.faqs { ... /* adjust to your own preference */ padding: 2rem; ... }
4️⃣ your image trick is awesome and I liked it 🥰
5️⃣ class of
.arrow
could improve a lot, here is my version:.arrow { transition: transform 0.3s ease-in-out; align-self: center; object-fit: contain; width: 0.75rem; margin-left: 0.75rem; user-select: none; pointer-events: none; }
❗ and to update your accessibility report (saying about 'role=main', you have to manually generate a new one (there is a red button to do so next yo your report). Same thing goes for screenshots.
Have a nice time and cheers 😄🎉
Marked as helpful
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord