Portfolio Page - White block appearing

Site URL: https://fifty-fifth.com/ned-champain/japan-ready

Hey there!

URL in question: https://fifty-fifth.com/ned-champain/japan-ready

I'm having an issue with my portfolio pages. I have made the background of these specific pages black as well as the footer of the page - however, when viewing the site on mobile device or when decreasing the width of my browser window there is a large white block that separates the portfolio navigation and the footer. Is there anyway to fill this white block with black? I have tried to move things around and apply spacers but it ruined the design so I'm turning to CSS. It seems like a Squarespace error! 

Even when I remove all custom code from the entire site there is the same issue.

Thanks! 

Ned

Hi @Ned

The white is the "gap" between the page content and the footer. It's appearing on this page because, when the image shrinks for mobile, the page content isn't long enough to fill the page, at least not on a larger iPhone. You probably wouldn't notice this on a smaller phone or with a white background 🙂.

A simple workaround is to use some CSS to add some bottom padding to the item-pagination--prev-next on this page on mobile devices. This will fill the gap with the black background of the pagination. For example, something like:

@media screen and (max-width: 767px) {
  #item-5e9337f284e1fa3b45a9195a .item-pagination--prev-next {
    padding-bottom: 134px;
  }
}

Let me know how you get on.

-Paul

@paul2009 

This worked a like a charm for mobile - thanks so much!

Do you think there is anyway to add some kind of flexbox style padding where it automatically fills the rest of the page down to the top of the fixed footer depending on the width of the desktop window? Just so that if anyone changes the size of their desktop window it won't appear there as well. Or am I pushing my luck? 

Thanks

Ned