markdown-body div is hidden under footer-nav on mobile devices

[GeorgeGkas]

I submit a new UI bug. This bug affects all docpress versions until 0.7.1 (which is the latest version so far).

Description

Docpress use a div as a footer pagination mechanism for switching across pages. This div takes a class attribute with footer-nav value. The footer-nav div is fixed positioned to allow the div remain at the bottom of the page. When the screen width is less than 960px it overlaps with the markdown-body which contains the main page content. This results in some lines of texts to be hidden under footer-nav. This bug affects all the generated pages.

Steps to reproduce

Bellow I provide a reduced test case that highlight the bug.

1. Go to https://georgegkas.github.io/stream.js-website/getting_started/index.html
2. Open responsive mode in developer console of your browser.
3. Change the width to less than 960px.
4. Scroll to the bottom of the page.
5. You'll see that the last paragraph does not end as expected and some text is missing.

Expected vs Actual Result

Expected Result

Actual Result

Proposal Fix

The reason that markdown-body is covered is that fixed position elements are removed from the document flow and do not take up any space. So markdown-body is ending at the bottom as if footer-nav isn't there. What we can do is use padding to take up space that would have been occupied by footer-nav as if it was in the normal flow. Something like this:

.markdown-body
  margin: 0 auto
  max-width: 768px
  overflow: visible

  // add this
  padding-bottom: 24px + 16px + $xpad

The value of padding-bottom property is equal to the height of footer-nav class.
I'll post a pull request immediately to fix that issue.