FAQ Accordion Card (no Javascript)

Community feedback

• 

  Benjamin Nicholas Wells•230

  @BenjaminNicholasWellsPosted about 2 years ago

  Hey Pneumatick 👋

  Which browser do you use for the mobile viewer because my current build of Firefox shows the same issues you are describing in its mobile viewer.

  The issues you are running into stem from setting your body height with an unresponsive property and the usage of { position: absolute; } within it. In short your html document has a fixed height that is only catering to the elements positioned in the normal flow so any instance of viewing the page on a viewport that has dimensions smaller than the content of the html document is going to throw up some wacky behaviour because the entirely of your content is { position: absolute; }; centred by { justify-content: center; } and pushed up further by the { bottom: 72px; }.

  So working backwards from that: reverting the position of your main element from absolute to default (static) and removing the justify-content property from the body element will introduce the ability to scroll through your content as well as prevent it from overflowing above the beginning of the body where it is inaccessible to the user. You will also need to change the height property of your body to min-height so that the gradient doesn't just occupy 100% of the viewport height and instead 100% of the content inside your body.

  Hope that helps; I know the solutions undermine a lot of the work gone into positioning elements on the page for your mobile layout but if anything I hope it brings to light the reasons why certain behaviours were happening and how to prevent them from happening in future projects you have.

  0