Submitted over 2 years ago

FAQ Accordion card (mobile first)

Jérémy•1,020

@jrmydix

Preview site View code

This is a solution for...FAQ accordion card

HTML
CSS
JS

1newbie

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
@jrmydixPosted over 2 years ago
@mrsimms430 Thank you, I'll try it!
0

Please log in to post a comment

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