Skip to content
Submitted over 3 years ago

FAQ Accordion with lots of pixel pushing

Mohammad Kaif Ul Majed•20
@KaifUlMajed
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

Very annoying challenge with the pixel pushing of getting images and background to line up with each other. Surely there are better ways of arranging various images within a div to paint a picture rather than using position: absolute and experimenting with various margins and paddings?

Community feedback

  • Account deleted

    I find it better to use background-image : url(...) in css than <img src='...'/> in html if you really want to put an image in a very specific position.

    Btw I think you solution looks ok.

    Keep coding👍.

    1
  • Abhineet Kandele•320
    @abhineetkandelePosted over 3 years ago

    Great Job!!

    Few suggestions from my end.

    • Font can be imported directly inside the CSS file.
    • Try building this without using JS. Use details & summary HTML tags for accordion and picture tag for different images in different breakpoints. It would be fun.
    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