Skip to content
Submitted 6 months ago

Vanilla JS

Michael Degorre•160
@MDEGORRE
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...FAQ accordion
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I managed to get it right for the interaction 😊. Using max-width on the container made sure that the paragraph does not stretch the container as well.

What challenges did you encounter, and how did you overcome them?

It was tough to select the paragraph inside the section and i do not think my structure is the best to be honest.

What specific areas of your project would you like help with?

I need help for the following issues please:

  • the background-image
  • the position of the box (because of the background-image...) Any advices are welcomed. 👍

Community feedback

  • Alex•3,130
    @Alex-Archer-IPosted 6 months ago

    Hi! I like your code - to add listener to DOMContentLoaded event is a new approach for me. It's cool =)

    To fix your background issue you can use background-size: contain; instead of cover.

    I recommend you to replace your .handler_icon with button element - it'll improve semantics of the layout. Also add hover effect and cursor: pointer property for each clickable element for better user experience.

    Oh, and I see that body styles in your css rules repeated in the media queries except padding - that isn't necessary as you can only specify properties that changes.

    Well, good work, keep doing =)

    Marked as helpful
    0
    Michael Degorre•160
    @MDEGORREPosted 6 months ago

    @Alex-Archer-I

    Thank you for your advices however the background-image did not take full width with contain. I guess because of the width of the svg set to 1440, it could not take full width on my larger screen. I added a preserveAspectRatio="none" on the svg and background-size: 100% instead. 🤔

    1
    Alex•3,130
    @Alex-Archer-IPosted 6 months ago

    @MDEGORRE

    Oh, I didn't think about big screens at all! It seems you found a more neat solution. I wonder whether it'll work just with background-size: 100%. Sorry for not-so-helpfull advice and thanks for sharing =)

    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