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 using HTML,CSS and JavaScript

Dainaa 175

@Dainaa

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


Hi! I didn't have access to the sketch files, so some whitespacing might be a little different to how the designs look, but I tried my best to replicate everything I could. The preview for my work on Vercel looks incorrect. Once the url is loaded, everything looks like it's in the right place. Could anyone tell me what to do about the preview looking messed up? Thank you!

Community feedback

Anna Leigh 5,135

@brasspetals

Posted

Hi Dianaa!

I think I know why your preview looks incorrect to you. The margins you have on your .white-container might center it on your specific resolution, but it’s not actually centered on all screens - at least not the desktop version. The preview screenshot is actually displaying correctly. To fix this, I suggest removing the following from your .white-container:

margin-top: 129px;
margin-bottom: 134px;
margin-left: 3.9in;

and replacing it with this:

top: 50%;
left: 50%;
transform: translate(-50%,-50%);

You must keep position: absolute in your .white-container for this to work. You’ll also have to readjust the position of your box afterwards. Hope this helps! You did a great job on the accordion, and adding the little arrow animations makes it even better. 👍

2

Dainaa 175

@Dainaa

Posted

@brasspetals Thank you so much! I made the changes you suggested, and it looks much nicer :)

0
Dainaa 175

@Dainaa

Posted

@brasspetals My vercel preview still looks off though :( Am I not updating that manually or something?

0
Anna Leigh 5,135

@brasspetals

Posted

@Dainaa The screenshot on Frontend Mentor is taken when you first submit your solution, and is only updated if you click the "generate screenshot" button underneath the preview. Just note have a limited number of screenshot updates for free accounts.

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