Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

FAQ Accordion Card - Vanilla HTML and CSS only

Lisa Allen 520

@CrypticMango

Desktop design screenshot for the FAQ accordion card coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I was not sure how I could achieve the "cut-off corner" look in the desktop view for the woman online image. If anyone knows how to get this to work let me know. I tried using z-index but I am not experienced enough to get it to work. Unless there is another way. Any suggestions are appreciated. Also anything wider than 1440px, the orange box will move because I used absolute positioning, How do I make it stay where I want it with all larger screen sizes? Thanks in advance. Other than that completing this challenge taught me about the <details> HTML tag and how to use it.

Community feedback

@hrk-berserker27

Posted

Following are hacks that I used to get rid of these problems while completing the challenge:

  1. If I am not wrong, the "cutoff of the corner" you are talking about is the overflowing part of the woman illustration image. You can get it right by enclosing the illustration in a div and adding "overflow: hidden" in the styles. It will hide the overflow part.
  2. To not allow the absolute positioning to alter the position of the image on increasing the screen size, you can add the "position: relative" to the container relative to which you want to fix its position and set the top and left properties in "em" units which should work.
  3. You might have missed the background of the illustration SVG's section.

If it doesn't work, then you can check out my code.

Marked as helpful

1

Lisa Allen 520

@CrypticMango

Posted

@hrk-berserker27 Okay thanks! and I noticed that the background seemed to have disappeared when I uploaded my solution but when I look at my solution on my pc it's there so I'm not sure if something is not being displayed properly on the solution page or if it's another error.

1

Please log in to post a comment

Log in with GitHub
Discord logo

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