Skip to content
Submitted over 2 years ago

FAQ container with flexbox and vainilla js

Alberto Medel•210
@almero0922
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion card
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I had so much trouble with the position of the desktop box svg. I had trouble with the closure of the selected question logic. Any tips?

Community feedback

  • Philip Korb•170
    @PhilipKorbPosted over 2 years ago

    Hi, i saw your code and i have some tips: your code:

    <body> <span class="icon-box-desktop"></span> <main class="main-container"> <span class="img-top"></span>

    that means your box svg for desktop view is out of your main card, so you can't position it matching other elements... only the <body> wich is your closest parent.

    if i was you i will probably solve it adding a div around the main card with same sizes and pos relative, then in this div add your element <span class="icon-box-desktop"></span> on pos absolute, so u can position it relative to your main card and it will be fixed on resize window.

    i figured this challenge too if u want to see how i did on my profile. I hope it helps, and Keep Coding!

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

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