Skip to content
Submitted almost 3 years ago

Mobile first design using plain CSS and Flexbox

Florian Stăncioiu•610
@florianstancioiu
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

Feedback is highly appreciated, thanks in advance!

I had some trouble with setting the right width for the FAQ text on the desktop, I couldn't use padding because padding would enlarge the containing div (because of display flex), I hacked it by setting fixed widths on the h1 and ul.

Community feedback

  • Luiz Henrique Martins•20
    @iamluhmrtPosted almost 3 years ago

    this is amazing i love it.

    Marked as helpful
    1
    Florian Stăncioiu•610
    @florianstancioiuPosted almost 3 years ago

    @iamluhmrt Thanks

    0
  • Manjiri Phatak•90
    @manjiriphatakPosted almost 3 years ago

    so much to learn from your code :) I was just over complicating mine.

    1
    Florian Stăncioiu•610
    @florianstancioiuPosted almost 3 years ago

    @manjiriphatak I think I've made some mistakes on the desktop version, it feels weird having to set fixed widths there. I don't know why but it feels like a code smell to me.

    0
    Manjiri Phatak•90
    @manjiriphatakPosted almost 3 years ago

    @florianstancioiu ...... but without fixed width my element just wont show up... it is not visible without fixed width.

    0
    Florian Stăncioiu•610
    @florianstancioiuPosted almost 3 years ago

    @manjiriphatak Yeah, you're right

    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