FAQ Accordion

Community feedback

• 

  Ken•935

  @kenreibmanPosted about 3 years ago

  Nice attempt! It seems like you had trouble centering your card within your body. For future projects similar to this, there is a quick and easy way to center your container. In your body tag for CSS if you put:

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  

  The child content (in your case it would be .flex-container) will automatically be centered in the middle your page. No need to mess around with weird margins like margin: 15vh 15% auto 15%;

  For your main card component (.flex-container) I recommend setting a max-width. Giving some padding on your body should also fix the issue of the right side window overlapping when trying to shrink your site.

  All images that are decorative purposes on your site should have aria-hidden="true" such as:

  <img src="images/illustration-woman-online-desktop.svg" aria-hidden="true">
  <img src="images/illustration-box-desktop.svg" aria-hidden="true">
  

  also changing <div class="flex-container"> </div> to <main class="flex-container"> </main>

  will remove most of your accessibility issues.

  You can read more about aria-hidden here.

  2