Footer blocks the content when scrolling to the bottom.

[mendax1234]

Hi, I try to add the visitor counting map to my website at the footer. I modify the footer.html and below is the my HTML file.

{% include base_path %}

<center>
<div class="page__footer-follow">
    <div id="clustrmaps-widget">
      <script type='text/javascript' id='clustrmaps' src='//cdn.clustrmaps.com/map_v2.js?cl=ffffff&w=300&t=tt&d=Z-7P-c__jyKWkEFWv6kpimyIUKQSYn8vWo0XVWtk0gE'></script>
    </div>

  <!--
  <ul class="social-icons">
    {% if site.data.ui-text[site.locale].follow_label %}
      <li><strong>{{ site.data.ui-text[site.locale].follow_label }}</strong></li>
    {% endif %}
    {% if site.twitter.username %}
      <li><a href="https://twitter.com/{{ site.twitter.username }}"><i class="fab fa-twitter-square" aria-hidden="true"></i> Twitter</a></li>
    {% endif %}
    {% if site.facebook.username %}
      <li><a href="https://facebook.com/{{ site.facebook.username }}"><i class="fab fa-facebook-square" aria-hidden="true"></i> Facebook</a></li>
    {% endif %}
    {% if site.author.github %}
      <li><a href="http://github.com/{{ site.author.github }}"><i class="fab fa-github" aria-hidden="true"></i> GitHub</a></li>
    {% endif %}
    {% if site.author.bitbucket %}
      <li><a href="http://bitbucket.org/{{ site.author.bitbucket }}"><i class="fab fa-bitbucket" aria-hidden="true"></i> Bitbucket</a></li>
    {% endif %}
    <li><a href="{% if site.atom_feed.path %}{{ site.atom_feed.path }}{% else %}{{ base_path }}/feed.xml{% endif %}"><i class="fa fa-fw fa-rss-square" aria-hidden="true"></i> {{ site.data.ui-text[site.locale].feed_label | default: "Feed" }}</a></li>
  </ul>
  -->
</div>

<div class="page__footer-copyright">&copy; {{ site.time | date: '%Y' }} {{ site.name | default: site.title }}. {{ site.data.ui-text[site.locale].powered_by | default: "Powered by" }} <a href="http://jekyllrb.com" rel="nofollow">Jekyll</a> &amp; <a href="https://github.com/academicpages/academicpages.github.io">AcademicPages</a>, a fork of <a href="https://mademistakes.com/work/minimal-mistakes-jekyll-theme/" rel="nofollow">Minimal Mistakes</a>.</div>
</center>

But seems that now the map in the footer will block some of my page content when I scroll to the bottom. I don't know what's wrong with my code. Can someone help me? Thanks so much!

[mendax1234]

I have fixed this error by commenting these three lines in the footer.sass

  /* sticky footer fix start */ 
  /* position: absolute; */
  /* bottom: 0em; */
  /* height: auto; */

I don't know whether there will be some fatal error to do this. Thanks for any help!

[rjzupkoii]

I'll double check tonight, but it doesn't look like that commenting that out should cause any problems if your objective is to avoid overlapping content. The visitor content hasn't been worked on in awhile and it sounds like the footer has a higher priority than it - or the map has some sort of fixed positioning. If you notice anything else with the map please feel free to open an Issue so I can remember to take a closer look at what is going on.

[mendax1234]

Thanks. Seems that the clustrmap functions normally with my website.

[mendax1234]

@rjzupkoii The issue about this topic has been created. Will cloes the discussion then. Thanks