Archived topic
Zero top padding container block creates gap between containers in GeneratePress
8 replies · Started by BMM on February 14, 2023
We're documenting this "bug" (?) because we're hoping others having it will find a solution and perhaps there's a reason this is happening, but it seems like a bug and can be very maddening. It's LESS obvious on a site without a colored background.
When we have two blocks with black backgrounds and we do NOT set padding one of them we get a white gap between the blocks.
It's odd.
We will update this topic as we clarify the issue, but in a nutshell if passing is set on one block and not on the next block a gap is created.
This issue is perplexing so our documenation of this is going to evolve.
Here's a block, no top padding is set, a gap is created. By setting padding, the gap is removed. https://prnt.sc/Do4bD1_giTpi
Now we set the top padding to 30px, but the gap still exists: https://prnt.sc/rtvH-L8tDoKq
Then we click to the container block above and the gap goes away: https://prnt.sc/Onkezf9KK80Q
This happens on all blocks, but its VERY apparent when the background color of a block isn't white.
Our description of this issue is very poorly done, but it happens on block elements and on page elements. If we do NOT set padding a white gap is created. You cannot inspect the block. It's simply empty space in the page structure.
Any feedback on this would be great and perhaps documenting it will help others who are struggling with this.
It seems to be a white gap created between blocks. We looked through other support topics and didn't see anyone specifically dealing with this and the CSS tricks used to solve other peoples problems with using empty shortcode blocks etc didn't solve this problem.
Thanks!
Hi there,
Does this only happen in the editor and not on the front end?
If so it's likely a Gutenberg thing that we cannot control.
If this happens in the front end as well, can you link me to the page in question so I can inspect where the space is coming from?
Thanks :)
In this situation here are my padding settings on blocks
Padding on below container https://prnt.sc/JocvZ4Pjvrmi
Padding on above container https://prnt.sc/ph29S2dV_p8x
Blank space desktop only: https://prnt.sc/bLPA33V9FjVS
Sorry if this is confusing. Head is not in the space to fully process and document this, but the issue is persistent.
In one orientation creates a blank space on desktop. The other orientation creates a blank space on mobile.
Very confusing.
If you resize the page on the hot tub page, the blank space vanishes.
However if you go to the page attached to this post you will see the blank space is persistent on both desktop and mobile widths.
Hi there,
The gap was added by the video.
Try adding this CSS to override it:
.wp-block-fv-player-gutenberg-basic .fp-playlist-vertical-wrapper {
margin-bottom: 0;
}Is that true also for the private page mentioned in this comment? Doesn't seem to work. I'm sorry my explanation is very poor. This issue has been very hard to narrow own and it's resulted in blank spaces above the player, below the menu. This is just one example. Check the page in the private area of this comment. The CSS offered has no effect. Thank you!!
As you can see the margin is added by the video plugin, add the play bar using position:absolute; which is not a good practice in this case, that's why it's exceeded the GB container area.
Check the video for reference:
https://www.screencast.com/t/BEC9DozgcXl
I would recommend reaching out to the plugin's support for a solution.
Thank you for the help! We'll continue to document this issue and we've raised a ticket with the player provider. As mentioned before this issue has happened in numerous areas and sees to be related to GP also so we'll do a better job of documenting and update this topic as appropriate. Thank you again!
As mentioned before this issue has happened in numerous areas and sees to be related to GP
By looking at the CSS of the video plugin, it's not theme specific, so the issue will happen to other thems as well.
Keep us updated :)