Skip to content
Submitted over 3 years ago

Responsive layout done with detail and summary semantic elements

Omar Insurriaga•75
@oinsur
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 wanted to get some feedback about how to work with multiple background images in containers. I had to use some negative values and wanted to see if there was another way to best approach projects like this one that requires multiple background images.

Community feedback

  • Abhineet Kandele•320
    @abhineetkandelePosted over 3 years ago

    Nicely done!!

    I would definitely recommend checking out the accessibility issues in the report.

    Marked as helpful
    0
    Omar Insurriaga•75
    @oinsurPosted over 3 years ago

    @abhineetkandele Thank you for your suggestion! I had not noticed the error reports before or in other challenge courses I had done previously. That is a very helpful tool that Frontend Mentor provides for us.

    0
  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    Greetings, Omar Insurriaga! 👋

    Well done on this challenge! 👍 Your positioning of the images in this challenge seems pretty good! 😀

    I'd like to suggest not using a percentage value for positioning the floating box in the desktop layout of the page, since that means when the height of the accordion card grows (and it will when the FAQs inside it are opened), the position of the cube will shift and it will no longer be in its correct place. A fixed value for bottom for the floating cube might work better in this case. 😉

    Here's my solution to this challenge (which isn't perfect, but not bad, I think 😅) if you'd like to see another approach to positioning the images in this challenge.

    Also, you don't need to put p tags inside your summary tags (since the summary tag should suffice and including a p tag is producing some errors on the solution report).

    Hope that is helpful. 🙂

    Keep coding (and happy coding, too)! 😁

    Marked as helpful
    0
    Omar Insurriaga•75
    @oinsurPosted over 3 years ago

    @ApplePieGiraffe Thank you for your suggestion for using fixed values, I will look into that. I had not noticed the error reports before or in other challenge courses I had done previously. That is a very helpful tool that Frontend Mentor provides for us. I really like the animation you have on your floating box!

    1
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    @oinsur

    Haha, thanks! 😀 Glad to help! 👍

    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