Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

FAQ Accordion Card with HTML, CSS, Bootstrap 5.2

Giorgi• 200

@siduki

Preview site(opens in new window)View code(opens in new window)
Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

FAQ accordion card
  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello everyone

I have solution for this challenge, but it's not fully done, have two task.

  1. Overflow of box image, how can I resolve it, I can't find solution.
  2. Accordions arrow icons showing on Firefox and don't on Chrome, can't resolve.

If you have some solution or advices, please don't hesitate.

Community feedback

Tien• 210

@NN-NT-TN

Posted

.accordion-button.collapsed::after { background-image: url(../Images/icon-arrow-down.svg); this should be "background-image: url(../images/icon-arrow-down.svg"); background-size: 100%; width: 12px; } make sure the links are correct yes whether the letter capitalize or not I guess Firefox don't care about capitalization .

Marked as helpful

0
Giorgi• 200

@siduki

Posted

@NN-NT-TN Hello

I changed it and it works locally, I already uploaded changed code and let's see, it needs few minutes for activate on pages. I don't know, why I had there uppercase "I", and also, I don't knew about this difference between Chrome and Firefox.

Thank you for your help.

0
Giorgi• 200

@siduki

Posted

@NN-NT-TN Hello

I changed it and it works locally, I already uploaded changed code and let's see, it needs few minutes for activate on pages. I don't know, why I had there uppercase "I", and also, I don't knew about this difference between Chrome and Firefox.

Thank you for your help.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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