FAQ accordion card using HTML,CSS and JavaScript

Community feedback

• 

  Anna Leigh•5,135

  @brasspetalsPosted about 4 years ago

  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

  @DainaaPosted about 4 years ago

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

  0

  

  Dainaa•175

  @DainaaPosted about 4 years ago

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

  0

  

  Anna Leigh•5,135

  @brasspetalsPosted about 4 years ago

  @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