FAQ accordion (Tailwind CSS + AlpineJS)

Community feedback

• 

  Yonten•340

  @yozidstPosted 11 months ago

  Hello 👋,

  Congrats! on the challenge. Great job on the layout. Here is a minor/unnecessary tip:

  html {
      border-left: #333 solid 1px;
      border-right: #333 solid 1px;
  }
  

  ~This would hide that 1px for the pink line appearing from both sides by camouflaging with the monitor's side shadow.

  Also, maybe implement a margin-top on your container, that way it stops the accordion from expanding higher. On mobile view on 375px, the content gets cut off from the bottom and can't be scrolled downwards. An accommodating margin-top and bottom padding will prevent content from getting cut off from the user's reach. Nevertheless, Keep going!

  Here's my approach:

  eg.

  .container {
      position: relative;
      display: flex;
      align-items: center;
      flex-direction: column;
      padding: 34px;   // depending on preference; bottom padding* mainly 
      margin-top: 134px  // depending on preference; this was my setup
  }
  

  Marked as helpful

  1

  ---

  

  Andrés Gutiérrez Ramírez•2,470

  @AGutierrezRPosted 11 months ago

  Hi @yozidst,

  Thanks for your tips!!

  • I resolved the first by adding a background color dark purple, this removed the 1px gap that I didn't see, thanks for that
  • I've added a padding block in the main to prevent the content from being cut off.

  1