[Resolved] Need help removing large white spaces between blocks

[Trish]

Thank you for your offer Justin.
Much appreciated, but I can only hand over access to developer’s support.
You have a sweet heart for offering though, so again, Thank you.

[David]

Hi there,

if you’re still ok to try GenerateBlocks, then:

1. create a new draft page.
2. in the 3 dot menu switch to cover view
3. Paste in this code:

<!-- wp:generateblocks/container {"uniqueId":"fb4e178f","containerWidth":620,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"89be009d","alignment":"center"} -->
<h2 class="gb-headline gb-headline-89be009d gb-headline-text">Create a Winning Website</h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/container {"uniqueId":"c51d0c44","paddingTop":"10","paddingRight":"10","paddingBottom":"10","paddingLeft":"10","paddingSyncUnits":true,"marginBottom":"20","backgroundColor":"#FFFad6","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"3c7c08f9","element":"p","marginBottom":"0"} -->
<p class="gb-headline gb-headline-3c7c08f9 gb-headline-text">Yes, It’s Impossible To&nbsp;<strong><mark style="background-color:rgba(0, 0, 0, 0);color:#8b0000" class="has-inline-color">Earn</mark></strong>&nbsp;Money While&nbsp;<strong><mark style="background-color:rgba(0, 0, 0, 0);color:#8b0000" class="has-inline-color">Sitting</mark></strong>&nbsp;On Your Sofa With&nbsp;<strong><mark style="background-color:rgba(0, 0, 0, 0);color:#8b0000" class="has-inline-color">Your</mark></strong> Laptop! You Can Learn To Succeed With World-Class Training!&nbsp;<strong><mark style="background-color:rgba(0, 0, 0, 0);color:#8b0000" class="has-inline-color">Start FREE</mark></strong> Today, And See For Yourself. You Won’t Even Be Asked For A Credit Card!</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/headline {"uniqueId":"a1768b0d","element":"p","alignment":"center","fontSize":14,"marginBottom":"20"} -->
<p class="gb-headline gb-headline-a1768b0d gb-headline-text">Enter Your Email Address And You’ll Receive Your Invitation To Join Free, in 3 Seconds!</p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"5f2f7826","element":"p","alignment":"center","fontSize":14,"marginBottom":"20"} -->
<p class="gb-headline gb-headline-5f2f7826 gb-headline-text">ADD YOUR FORM SHORTCODE HERE</p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"f62038e6","element":"p","alignment":"center","fontSize":14,"marginBottom":"20"} -->
<p class="gb-headline gb-headline-f62038e6 gb-headline-text">Join At Anytime – Even If It’s 3AM</p>
<!-- /wp:generateblocks/headline -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->
<!-- /wp:generateblocks/container -->

Then switch back to visual editor.

I set up the GB blocks i would use to create that layout.
You’ll see there are far fewer blocks then using the core ones.
To control the spacing, each Container or Headline block, in it Settings > Spacing you can set its Top and Bottom margin.

Note that all the blocks are inside a top level block that i set the inner width to 620px.

If that works for you, you can then copy ALL the blocks to where you need them.

[Trish]

Hi David,

If Tom were to blend GP Premium and GP Blocks into ONE new theme, then I’m game to try that one. Though, now I’m also a bit concerned that support here may be dwindling… like the previous purchased theme developer’s themes I used, did. 🙁

Recently, my WordPress installation for this website became contaminated so badly that I had to literally rebuild this site. The tech support on the host informed me that over 20 plugins is NEVER a good idea… and I agree with them. I have removed many of the plugins used previously and now, here I’m being told to add another plugin to solve ONE page?

I’m sure you can understand my frustration.

[David]

Hi Trish,

the GB plugin is coded like we coded GP, it only writes the HTML and CSS each block requires. If you don’t add a GB block to a page then it doesn’t add any code. If you add one block it only writes its HTML and the CSS just for the settings you apply.

Regarding our support, we try out best every day and we aim to respond to every topic within 24hrs of it being posted, we still average around a 7hr response, with 60% of topics replied to in under 2.5hrs. Weekend responses are slower as not everyone is available 7 days a week, so kinda hope users cut us a little slack there 🙂 But i am sorry if this hasn’t been your experience.

Let us know if you want to try GB, or if you want us to give you some CSS for tidy up the styles that the core blocks are generating.

[Trish]

Hey David,

Guess Leo kinda’ punched me in the gut with his refusal to help unless I comply with installing GP Block.

After working diligently to get this site back up and operating properly… a LOT of exhaustion… then when trying to create a “unique page”, I WAS willing to wait for YOUR help, as you’re the one who offers the BEST most helpful responses… but he just kept nagging me.

I’d have sooner waited until this morning for YOUR help.

PS: At one point yesterday, I looked for a way to simply delete my question.

[David]

Try this CSS:

.page-id-10993 .entry-content > [class*="wp-block-"]:not(:last-child),
.page-id-10993 .entry-content > [class*="wp-block-"]:not(:last-child) p {
    margin-bottom: 0.5em;
}
.page-id-10993  .wp-block-separator {
    margin: 30px;
}

[Trish]

Sadly, that CSS coding made absolutely no difference.

Why does the dot page hyphen id hyphen 10993 (being the id of the page, yes) have to be there; Having the CSS code ONLY appear on this page, would make that redundant would it not?

Can I offer you, David, login access to this site?

[David]

Where are you adding the CSS?

The .page-id-10993 needs to be there so it only affects that page.

[Trish]

Hi David,

I’m adding the CSS in the Simple CSS window on the exact same page as the post itself.

So far, I’ve added the following:

body {
  background-color: #fff;
}
.remove-margin-bottom {
   margin-bottom: 0 !important;
}

And that has not affected any other web page. Am I wrong with my thinking that adding the CSS in the window below the page itself affects only THIS page’s content?

[David]

Ah ok, if its in that place then yes you can drop the page id so:

.entry-content > [class*="wp-block-"]:not(:last-child),
.entry-content > [class*="wp-block-"]:not(:last-child) p {
    margin-bottom: 0.5em;
}
.wp-block-separator {
    margin: 30px;
}

[Trish]

Nope… it still didn’t work.

Am curious, I’ve never worked with CSS code that is square brackets before. Is this due to all the heavy coding needed in WordPress themes now?

That coding looks nearly PHP…

[David]

The [class*="wp-block-"] is just a method of selecting any HTML element that has a CSS class that contains the words wp-block-. It saves writing lots of different selectors.

Why does it not work ? Thats the odd one.
Can you share a link to the page, i just want to make sure i am looking at the right thing

[Trish]

Yes David… I sure can share the URL to that page. See below…

WordPress truly has complicated soooo much with their Block Editor. Don’t know why humans think that newer is always better. Sometimes newer is worse.

Thank YOU David, for your patience with me.

[Trish]

Hey David,

I have tried the following CSS:

/* Block spacing */
hr.my-hr {
    margin-top: 0px;
    color: #d3d3d3;
}
.remove-bottom-space {
    margin-bottom:  0 !important;
}
.remove-top-space {
    margin-top:  0 !important;
}
.remove-padding-top-bottom {
    padding:0 10px;
}

Making sure to add the proper classes to the appropriate Additional CSS Class(es), and still nothing.

How can this page ignore CSS code added to the Simply CSS window like this?

I am totally baffled.

[David]

Can you go to the Simple CSS – not in the post editor.
And before any other CSS, add the CSS i provided here:

https://generatepress.com/forums/topic/need-help-removing-large-white-spaces-between-blocks/page/2/#post-2531914

Save that and let me know.

[Author]

Posts