posts overflow under cover panel

[RMBLRX]

So I'm not sure how to phrase this, but I've noticed that with a sufficient number of posts listed by paginate (such as on your own homepage), one is able to scroll on the uncollapsed cover-page. A scrollbar is visible and even operational since the position carries over when the blog link is clicked and collapses the cover. That's kind of irritating, since I think it would be most new visitors' first inclination to scroll down before clicking that link. On mobile (chrome for android, in my case), it is possible to view the scrolling content below the cover image with a little fiddling around (desktop just shows white above and below the image when attempting to scroll past).

Maybe it's not possible to fix without taking paginate out of the main index.html (I'll probably try this), or maybe the overflow CSS property would do the trick (I couldn't figure out where to implement it if that is the case, however), but I think it really detracts from an otherwise clean and beautiful theme.

Or maybe a different version of paginate with more flexibility would work?

[RaghavRamesh]

Yes noticed the same issue on desktop and mobile as well. Desktop: There is a scroll bar appearing and the user is able to scroll but nothing visual appears (actually the contents of the blog posts list are being scrolled behind the cover page) Mobile: The contents of the blog posts list are being scrolled behind the cover page when the user swipes up. The user shouldn't be allowed to scroll.

[tayfuncetin]

I haven't test it. But try this:

Add the following code to line 6 and line 20 and line 25 at main.js as a new code lines $('.content-wrapper__inner').css('display', 'block')

And the following code to line 1106 at uno.css display:none;

Your problem must be solved.

Short speech;

• your main.js file will be like this: http://pastebin.com/HZ09qA32
• your uno.css file will be like this: http://pastebin.com/pisYyJE3

[RaghavRamesh]

Yup, @tayfuncetin your fix works. Thanks :)

[RMBLRX]

Cool runnings so far. Thanks very much!

[blackbaud-joshgerdes]

@tayfuncetin can you make a quick PR for this fix?

[tayfuncetin]

@blackbaud-joshgerdes I'm not familiar with how Github works. So can you make this PR for me?

[dotps1]

This does fix the issue for me, however, doing so when i click on "older posts" nothing renders on the page. only the first page shows posts. if i revmove the two lines, then they are back, but i have the scrolling issue. you can see it on my site. https://grposh.github.io.

any suggestions?

[dotps1]

nvm, i fixed it, here is my js file, notice mine is the events page not blog.

layout: null
sitemap:
  exclude: 'yes'
---

$(document).ready(function () {
  $('a.events-button').click(function (e) {
    $('.content-wrapper__inner').css('display', 'block')
    if ($('.panel-cover').hasClass('panel-cover--collapsed')) return
    currentWidth = $('.panel-cover').width()
    if (currentWidth < 960) {
      $('.panel-cover').addClass('panel-cover--collapsed')
      $('.content-wrapper').addClass('animated slideInRight')
    } else {
      $('.panel-cover').css('max-width', currentWidth)
      $('.panel-cover').animate({'max-width': '530px', 'width': '40%'}, 400, swing = 'swing', function () {})
    }
  })

  if (window.location.hash == '#events') {
    $('.panel-cover').addClass('panel-cover--collapsed')
    $('.content-wrapper__inner').css('display', 'block')
  }

  if (window.location.pathname !== '{{ site.baseurl }}/' && window.location.pathname !== '{{ site.baseurl }}/index.html') {
    $('.panel-cover').addClass('panel-cover--collapsed')
    $('.content-wrapper__inner').css('display', 'block')
  }

  $('.btn-mobile-menu').click(function () {
    $('.navigation-wrapper').toggleClass('visible animated bounceInDown')
    $('.btn-mobile-menu__icon').toggleClass('icon-list icon-x-circle animated fadeIn')
  })

  $('.navigation-wrapper .events-button').click(function () {
    $('.navigation-wrapper').toggleClass('visible')
    $('.btn-mobile-menu__icon').toggleClass('icon-list icon-x-circle animated fadeIn')
  })

})