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 (mobile first)

Jérémy 1,020

@jrmydix

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


Hello, I need help on this one, my mobile version is okay, but I'm really unhappy with the desktop one.

  • How to position the desktop images (on the left) properly, and how to hide the "overflow" of them?

  • How to improve the javascript so that, you can only open one question at a time, when you click another one the previously opened automatically closes, and how to make it work with my css max height transition?

Thank you! 🙂

Community feedback

Account Deleted

Hi @jrmydix,

The method I personally used to get rid of image overflow is clip-path: inset.

Here is the MDN reference to explain it. (https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path).

Here is the link to the inset. (https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/inset()).

As an example, for my project, I target the img and used this.

/* Example: clip away the element from the top, right, bottom, and left edges */ clip-path: inset(100px 0 30px 300px);

This exact example may not work for you, but the technique might.

I hope this helps.

Marked as helpful

0

Jérémy 1,020

@jrmydix

Posted

@mrsimms430 Thank you, I'll try it!

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