Skip to content
Submitted over 3 years ago

Semantic HTML5 markup, CSS3, Flexbox, SASS, VanillaJS

Babajide Peter Oyafemi•200
@Babajide777
A solution to the FAQ accordion card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Good day all,

This is my first time using SASS, so I'll appreciate any comment on the file structure and how to make it better. Regards.

Code

Please log in to post a comment

Log in

Community feedback

  • LEUILLIER•120
    @JulienLEUILLIER

    Your code works, you just need to add height to .accordion-svg. By default backgrounds take the height of their container if I'm not mistaken, and if you use your browser Dev-tools you'll see the container has no height. Hope that helps !

    Marked as helpful
  • Marcus Hugo•365
    @marcus-hugo

    I had the same problem when switching to desktop. What worked for me was placing the desktop illustration and bg-pattern as background-images.

    background-image: url(../images/illustration-woman-online-desktop.svg), url(../images/bg-pattern-desktop.svg);
background-position:  -76px, -571px -248px;
background-size: 472px, 966px;
background-repeat: no-repeat;

    Hope this helps!

    Marked as helpful
  • Babajide Peter Oyafemi•200
    @Babajide777

    @JulienLEUILLIER Thanks it is working fine now. Regards.

  • Babajide Peter Oyafemi•200
    @Babajide777

    @MirthOsas it still doesn't work with the quotation marks.

  • Osasere Edukhure•20
    @MirthOsas

    Hey buddy, the quotation mark is missing. The syntax for the background image should be something like this: background-image: url("...........");

  • Babajide Peter Oyafemi•200
    @Babajide777

    @marcus-hugo

    Thanks for your time. I really appreciate it. However, the background is still not showing. I updated my code on Github and the live website. Please check it here: https://github.com/Babajide777/faq-accordion-card

    https://babajide-faq-accordion-card.netlify.app/

    Regards.

  • Babajide Peter Oyafemi•200
    @Babajide777

    @marcus-hugo Thanks for the advice Marcos, but I used this method, and for some reason, the background image doesn't show up. Please what do you think might be wrong? This is the code:

    .accordion-svg {
    background-image: url(../images/illustration-woman-online-desktop.svg),
      url(../images/bg-pattern-desktop.svg);
    background-position: -76px, -571px;
    background-size: 472px, 966px;
    background-repeat: no-repeat;
  }

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