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 card solution vanilla js

Justinβ€’ 140

@justinvanre

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


Feedback is appreciatedπŸ‘

Community feedback

@PartialTruss

Posted

Thanks for the help mate ! I will let you know if it works . Thanks a bunch😊

0

Justinβ€’ 140

@justinvanre

Posted

@PartialTruss anytime πŸ‘

0
Andre Ferreiraβ€’ 450

@Namonaki0

Posted

Hi Justin, well done for completing the challenge.

I found that the background image doesn't cover the entirety of the page and leaves a white gap on bigger screens. You could also try to centre the main container in mobile view. At the moment it sticks to the left.

I hope this helps a little bit.

Well done for the rest.

0

Justinβ€’ 140

@justinvanre

Posted

Hi @Namonaki0,

Thank you very much for taking the time to review my solution and pointing out the issues. As of the background image, could you please explain a little furter? I can't point it out myself at the moment.

Again, I appreciate you very much for taking the time to review my project. I'll try to resolve the issues!

1
Andre Ferreiraβ€’ 450

@Namonaki0

Posted

@justinvanre if you try to decrease the height of the viewport the background image in <main> doesn't follow along with the height and won't cover the entirety of the page leaving a white gap underneath. I wish I could post a screenshot in here but I don't think it's possible.

I also noticed that you are not able to close the same dropdown once opened, it only works when we decide to open a different one. I hope it makes sense.

I hope this helps.

0
Justinβ€’ 140

@justinvanre

Posted

Hi @Namonaki0,

Yeah I can see it now. Thank you for explaining it further. As of the toggle mechanism, that was intentional, but I'll see if I can change the logic to be able to close as well as it was also stated in the style guide.

Again, thank you for taking the time!

1

@PartialTruss

Posted

Fantastic job πŸ‘ŒπŸ‘ŒπŸ‘ŒπŸ˜πŸ˜πŸ˜ but here's a question , how did you implement that orange box near the woman? I have problem with that

0

Justinβ€’ 140

@justinvanre

Posted

Hi @PartialTruss,

I appreciate you taking the time to review my project. Thank you very much for the kind words. As of the checkbox, what I did, I made the component to be of 2 columns and used the images of the women and the shapes as background images for the left hand column. For the checkbox, I used a separate div and placed it on the left side of the component, using position absolute.

Hopefully it's of some use to you. Please let me know if it worked out!

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