Jump to content

Portfolio Page - White block appearing

Recommended Posts

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.




Link to comment
  • Replies 2
  • Created
  • Last Reply

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.


About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!
If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.
Improve your online store with our extensions.

Link to comment


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? 



Link to comment


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.