How to reduce the space in the H1 tag?

Hi @astcws are you able to advise which heading you want to reduce the space for, checking the home page I don’t see a heading that has a lot of space around it.

@thelmachido

Thanks for your reply.

https://new.chhsban.edu.my/wp-content/uploads/2023/05/WeChat-圖片_20230511073347.png

I put a new screenshot.

The A block was created by “Lastest Posts” and B block was created by “Query Loops”.

Althought the space bewteen lines in A block is good, but I cannot change the date position. I need to put it as like as B block. The date in the same line with the title.

I put a B block structure screenshot here:

https://new.chhsban.edu.my/wp-content/uploads/2023/05/WeChat-_20230511074126.jpg

Hope these information are enough for you. Thanks a lot.

Hi @astcws might I ask why you are not also using the Query Loop for the Important Notice section? The Query Loop is easier to customise, nevertheless, the CSS code below should move the Date and Post Title to the same line for all the Latest Post blocks on your site.

.wp-block-latest-posts__list li a, 
.wp-block-latest-posts__list li time {
  display:inline-block; 
}

To access the additional CSS section open Global Styles then click on 3-Dots that appear on the top-right. You will then see the option to access the Additional CSS section for your site.

@thelmachido

Really thanks a lot.

Because the latest post will be in a moderate space. And I just use two different ways to compare it.

I’ll try your method . Thanks again!

@thelmachido

Oh~I found this way can reduce the Div block space.

https://new.chhsban.edu.my/wp-content/uploads/2023/05/WeChat-圖片編輯_20230517143657.jpg

But it not only reduce the honor roll block. It reduce whole page space…..Still not what I want, but already better.

So how should I do if I use query loop?

Oh~I found this way can reduce the Div block space.

https://new.chhsban.edu.my/wp-content/uploads/2023/05/WeChat-圖片編輯_20230517143657.jpg

Hi @astcws the Global Layout Dimension settings are used to change how blocks look thought out your site. That’s why you are seeing the change on every block. You can read more about Global Styles below:

https://www.ads-software.com/documentation/article/styles-overview/

So how should I do if I use query loop?

When I was checking your site I noticed that section 1 and 2 in the screenshot above are using the Query Loop block. So for Important Notice you can use the same block as well. That is what I was suggesting.

Alternatively, you can stick to the Latest Post block and use the CSS code I provided before.

@thelmachido

Yes, thanks you reply. I have used the Latest Post Block and CSS that you provided to me before. But it didn’t work.

Now, I will use Query Loop block, but I still don’t know how to change space alone, not global.

Hi @astcws if you want to reduce the space shown in the screenshot below, that is coming from the heading itself.

Can you check the headings’ block dimension settings for any default padding or margin. I would also advise unlinking the padding and margin so that you can add 0 where you prefer, sometimes the default values aren’t shown in the editor.

If that doesn’t work you can try the CSS below:

p.fonts-plugin-block
{
margin-bottom: 5px;
}

• This reply was modified 1 year, 6 months ago by thelmachido a11n.

@thelmachido

Sorry, these days too busy, so reply late.

No, I didn’t just want to reduce the heading space.

In fact, now the web you see was ajusted when I changed in global layout that I mentioned before.

https://new.chhsban.edu.my/wp-content/uploads/2023/05/WeChat-圖片_20230523091500.png

I just wonder why I cannot just change the block space what I want.

Hi @astcws from what you have described it sounds like you have managed to achieve the look you want?

I just wonder why I cannot just change the block space what I want.

Have you tried changing the block spacing on a block level, this setting is available to blocks that have nested content for example group, column, row, etc. So maybe you can change the column block spacing as shown below:

Dimension Settings Overview

@thelmachido

Oh, yeah……I suddenly figure out why I didn’t reduce global space and ajust block space? I totally forgot this way! Haha…So stupid.

But now I have other problem….the REST API(404 error) when I move to an copy website. Anyway, I will open a new topic about this question.

Finally, Really Really Thank You!

Hi @astcws thank you for the update and I am glad that this has been resolved.

I am sorry to hear that you are now having another issue, however, you should open another issue as you have mentioned.

@thelmachido

Oh～wait, I found a new problem.

Can I limit the numbers of title? I know I can limit topic if I use latest title. But, I just now found it seems cannot limit if use loop query？

Sorry….I still have question to bother you.

Hi @astcws at the moment there isn’t an option to limit the text that is displayed for the post title. There is an open request to have this feature:

https://github.com/WordPress/gutenberg/issues/49748

Feel free to add your experience there, if not I can do it on your behalf. Let me know