Solution retrospective
Was able to get the accordion script working. However, I'm having some problems with the positioning of the images and how to position them in the desktop version.
I'm also having issues with the the container of the answer for each accordion taking up so much space when clicked (add this wonky and unpleasant effect).
Help would be super awesome!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @emestabillo
Hey James, first off, kudos to asking for feedback more than once! lol. Caught my eye in the Slack channel. You got close to the design here, congrats! I do think you can get closer still by adjusting the fonts because it's too small and a bit hard to read.
-
For the weird container behavior, try adding
flex-basis: 100%to.card. This tells the flex child to occupy all the available space of the parent, up to the max-width you've given it. Otherwise, it will shrink to the width of the current content which is what's happening here. I suggest to look into flex-grow, flex-shrink, and flex-basis going forward. -
On your html
head, there's a stylesheet calledlarge.cssthat doesn't exist inside your css folder and should be deleted. It's giving an error in the console. -
I haven't done this challenge but have seen different versions of how they handled the images. One is changing the image with a media query, and another by using the
picturetag withsrcset. Some might've used pseudoelements. Since you already have access to the challenge hub, I suggest to look through the submitted challenges to get some ideas. -
There's quite a bit to sort out in your html report.
Hope this helps!
Marked as helpful -
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