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

faqAccordion_madeWith❤

@szakidani23

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 could not manage that blue floor to be hidden when it overflows the white container. The solution has to be simple. If anyone could share it would be awesome.

Community feedback

Better5afe 850

@better5afe

Posted

Hi Daniel, nice project!

I had a look at the code and I think I have an idea how to solve the svg issue.

I would add another container with the same dimensions as the left column element and place the first image inside of it. Then, you just need to position it to match the design and add overflow: hidden to the container for desktop viewports (remember it should only contain the first image!). Once you're done with it, place the second svg (the orange box) outside of it. The orange box is not blocked by the overflow property, so it will stick out of its container.

Happy Coding!

Marked as helpful

0

@szakidani23

Posted

@better5afe Thank you <3

0

@szakidani23

Posted

Also the shadow on the left image is gone on my github.io page, but if I open the LiveServer on VSCode it is visible. I published this github page through Jekyl Github Action. Any idea?

0

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