Identifying the Causes of Blank White Space on Squarespace Site Pages and Exploring Solutions
Blank space on website pages is also called empty space or white space. It results in bad user experience and may increase bounce rate.
Background of the Problem
I noticed that each page (including blog posts) of my Squarespace website was showing a blank space (as shown in the image) between text sections as well as between text and image blocks. Empty space on the webpages created only when I opened the published live website in a browser - it was fine in editing mode of my Squarespace site.
My Unsuccessful Attempts for the Solution
I tried several methods including rearranging elements (text boxes, images) but no solution.
I tried adjusting the default Base Size of my Squarespace site.
I also tried scaling up and scaling down the sitewide size of Headings and Paragraphs. You can do it through this navigation location - click the “Brush” symbol (Site Styles) on the top right corner, then select Fonts.
I was convinced that the issue couldn't be related to CSS since I understand that custom CSS might disrupt Squarespace code, and I have never used custom CSS on my website.
None of the above mentioned attempts were successful as the website still displayed white space on its webpages.
The Real Cause of the Blank White Spaces
I was initially clueless. However, upon retrospection, I recalled the various recent adjustments I had made on Squarespace.
Specifically, I remembered integrating Google AdSense code on my site. Upon further investigation, I discovered that the white blank spaces on my Squarespace website were actually due to unfilled ad units from Google AdSense.
To determine the cause, I excluded some pages of my site in Google AdSense. I discovered that the excluded pages did not display any white space, whereas the pages included in Google AdSense continued to have blank spaces.
Resolving the White Space Issue on My Website
I was upset and carefully considered different solutions to address the issue of white spaces created by Google AdSense.
One reason for unfilled ad units might be that your AdSense account is new and has low ad inventory. Other reason might be that the publisher ID in the source code does not correspond to the publisher ID in the ads.txt file. Unfortunately, uploading an ads.txt file to your root level domain or directory is not possible on a Squarespace site.
Google AdSense provides methods to hide the blank space created by unfilled ad units but the methods have limitations.
At first, I decided to eliminate the Google AdSense code from my website and switch to direct advertising. However, truth is that it is also challenging to find advertisers for direct advertising.
I also considered using fixed-sized display ads, but the truth is, Google AdSense auto ads are simpler to implement.
I have consistently placed user experience above profits. Because earnings are also important for bloggers like myself, balancing advertising revenue with providing an optimal user experience has been crucial for me.
Therefore, finally I decided for keeping the Google AdSense auto ads on my site. However, I have excluded specific pages from displaying Google AdSense ads.
To exclude pages, navigate to this settings location in your Google AdSense dashboard. Click Ads → Pencil symbol next to your site name → Excluded pages → Enter URL (without https://www.) of the webpage to exclude from showing ads.
Deciding which pages to exclude was a tough choice. I opted to exclude the Home page of my website to prevent Google AdSense from displaying ads there. When excluding the home page of your Squarespace site, remember to exclude both URLs: YourSite.com and YourSite.com/home.
I also excluded the pages related to Dozro services. I also excluded some informational pages like the page where I have explained the correct size for Facebook cover. This decision was made because the page ranks high in search engines, increasing the likelihood of users seeking Dozro services for designing their Facebook cover photo. Thus, offering an ad-free excellent user experience on educational pages is highly recommended.
Nonetheless, I continued displaying ads on various educational pages across my website, where the likelihood of users converting to my services was lower - for example the pages related to branding advice.
I have outlined my approach to tackling the problem of empty white space on my Squarespace website. I trust this strategy will prove helpful for you.
White Space on Squarespace Due to Text Wrapping Around Images
Sometimes, Google AdSense may place an ad near an image, causing a blank white space on the webpage when text is wrapped around that image - as shown in below screenshot.
This issue can be avoided by displaying images in full width. Typically, the problem arises only when an ad unit is positioned next to an image.
To resolve this, consider refraining from wrapping text around images on your Squarespace website and opt for displaying images in full width.
Other Possible Solutions for Removing Blank Space on Website
If the above method does not remove the empty space between sections of your Squarespace website, you try the following methods.
Remove any spacer blocks on blog post pages. You can also try removing extra code blocks, empty text blocks and extra line breaks in text blocks.
To adjust the empty space on the left and right side of each page, click the “Brush” symbol (Site Styles) on top right corner, then Accessories, then Spacing. Here you can adjust the Page Width and Site Margin which applies to all pages of your Squarespace site.
To adjust the space between various sections a page with Fluid Engine editor (such as Home page), select the Edit button on a page. Select Edit Section (having pencil symbol). Under Format, reduce the vertical values of Gap. Here, you can also select the Small or Medium values for Height of the section.
Sometimes, empty white space on a website page also appears because you might have accidentally reduced the default zoom level of your browser. In this case there is no issue in your Squarespace website. You can solve this by resetting the default zoom level of browser for a specific site.
👉️ Spread the word by sharing this article on 🔗 Facebook, 🔗 X (formerly Twitter), or 🔗 LinkedIn.
More Resources
Check more learning resources about Squarespace.
Check the cost of Squarespace website creation service by Dozro.
Join our Facebook Group about Squarespace help.
Visit the HOME page of Dozro website to explore many other Free learning topics of your interest.
Spread the Word!
To share this page or save it for later, simply copy the URL 👇 and paste it into a new post on your preferred social media platform.
