Yet Another “How Do I Remove This Whitespace” Thread
-
Hey there,
The TLDR short version of my help query is that on this website…
https://velocityoption.com
… I have encountered two sections of white space that cannot be identified by using the page inspect tool. Hovering over them returns no value.
For context:
• I am very new to website building with no prior coding knowledge.
• The theme being used is “Blank Canvas”.
• I am currently on a “Personal” plan – meaning that, to my knowledge, I do not have access to edit the theme files or .php file of the website.
• There are no plugins in use on the website.
• The home page has no hidden content on it in the backend that is causing the white space to appear in its place – nor is there any content on the page template.
• I have tried creating a blank page template instead of using the default “Pages” template. The white space is present even within a brand new blank template.
• The white space is NOT present in “posts” pages on the blog.
• I have searched extensively for this issue manually using good “old fashioned” search results, have come across many answers on various forums, but none of the solutions have seemed to work in my case.
• I have tried troubleshooting with AI with no success (this is the first time I’ve hit a complete wall like this).
On the home page of the site, I have temporarily marked some sections with red borders to clearly indicate the stop and end points of the group blocks.
Two sections of white space are present – the first is located between the “example content section” and the footer – while the second is a massive section of white space located underneath the footer.
I’m assuming this white space must be getting added by the baseline theme somehow.
On a “Personal” plan, is there any way for me to disable, remove, or conceal this white space using custom CSS, or is this something that will either require switching themes or upgrading to get access to the theme files to solve?The blog I need help with is: (visible only to logged in users)
-
Hi,
How do you create the homepage? Could you please provide the steps? Like, is it a static page with a new template, or is it just a template? Because the site’s layout relies on the template. You can learn more about homepage creation on this page https://wordpress.com/support/create-a-custom-homepage/.
For a comparison, I built a static homepage with the same Blank Canvas; however, I cannot reproduce your white space problem. https://franzaurus7.wordpress.com/ As for the CSS customization option, it is only available on a Premium plan and above. https://wordpress.com/support/editing-css/
Additionally, I would suggest you look at this related post, perhaps you find it helpful: https://wordpress.com/forums/topic/cant-change-homepage-display-from-your-latest-posts-to-a-static-page/#post-4074687
-
Hey Franzaurus,
Thanks for the reply – it got me to dismantling and re-examining the current setup.
I’ve been messing around with this a bit more today.
To answer your initial questions, here are the steps I followed for initially setting up the home page:
Initial WordPress Settings
Navigate to Settings -> Reading:
> Your Home Page Displays: A static page.
> Homepage: Home
Hey Franzaurus,
I’ve been messing around with this a bit more today.
To answer your initial questions, here are the steps I followed for initially setting up the home page:
Initial WordPress Settings
Navigate to Settings -> Reading:
> Your Home Page Displays: A static page.
> Homepage: HomeConfiguring The Home Page
Navigate to Main Backend Menu:
>Open Home Page
> Open Right-Hand Settings Panel
> Set Template to “Page: Front Page”Creating/Editing The Footer
Navigate to Main Backend Menu:
> Open Appearance -> Editor -> Patterns
> Footer
> Add blocks to the template part (2 Groups, 2 Custom CSS Classes, 1 Image)Creating/Editing The Template
Navigate to Main Backend Menu:
> Open Appearance -> Editor -> Templates
> Add Template
> Select what the new template should apply to: (Home Page)
> Add blocks to the template (Nav Bar, Content Blocks, Footer)
So everything is “stock”, for the most part.
—
Partial Solution:
After inspecting the custom CSS section (which is available on the “Personal” plan for some templates, like Blank Canvas) – I was able to find a section of CSS that was causing the white space above the footer (it was a “top: x;” declaration). I had not previously been aware that CSS declarations could cause white space to appear *outside* of their elements / blocks… I had assumed that the white space would be contained within the associated element / block and detectable by the inspector tool.
Clearing the declaration removed the white space from the center of the page.
However, now I’m trying to add behavior to the site that will get the footer to “stick” to the bottom of the page, and it seems that the white space below the footer is acting in an unusual way.
The CSS lines I’m using are:
footer.wp-block-template-part {
margin-top: auto;
}
body, html {
height: 100%;
}body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
———-
According to both AI and this video, these few lines should be enough to cause the footer to hug the bottom of the page, regardless of the page’s content… but rather than following that behavior, the footer on my site instead jumps up to hug the nav bar (or whatever block is closest to the top of the page).
This behavior is being replicated on both the Contact and Blog pages as well, despite those pages using the “Pages” template.
I’m guessing there may be some aspect of the template itself that’s overriding one of the behaviors… but I’m not sure if there’s a fix that will work on the “Personal” plan.
The good news is that if there’s enough content on the page to push the footer to the bottom, it will hug the bottom of the page without any white space beneath it… so as a workaround for the time being, I may just conceal the footer from pages that don’t have a lot of content – or manually add a spacer to force the footer to the bottom of the page.
If you happen to know any workaround via CSS, that would be appreciated. -
Hey @velocityoption, I can think of a few non-CSS options that may help:
- Use a cover block in your content area. Don’t give it a background or overlay, just set it to full height. You may need to adjust any padding and alignment settings on the block.
- Depending on your layout, you might be able to use a “stack” block, set it to 100vh, and use the “space between” setting. If you do that you might want to be sure to group your title and content.
You could use CSS to adjust either of those options further. I’ll also see if any of my colleagues have thoughts.
- The topic ‘Yet Another “How Do I Remove This Whitespace” Thread’ is closed to new replies.
WordPress.com Forums 