plugins - How to change the width of certain paragraph or header blocks?

Most of the time I like having the blocks the full width of my site (/), but sometimes I just want to have a single header or paragraph block that isn't that big. Like if the text is only one or two lines, it looks really weird spanning the whole page (ie. The section on my page titled "Did you know that store bought fire extinguishers still need to be certified for your business?" I'd only want a bit wider than the middle column right above it).

I have no clue how to go about achieving this. Am I overlooking an option with the block editor? Is it some CSS/HTML that needs to be done? Or is there a plugin that would make this easier?

I'm using the OceanWP theme if that matters.

Most of the time I like having the blocks the full width of my site (https://princetonfireandsafety.com/), but sometimes I just want to have a single header or paragraph block that isn't that big. Like if the text is only one or two lines, it looks really weird spanning the whole page (ie. The section on my page titled "Did you know that store bought fire extinguishers still need to be certified for your business?" I'd only want a bit wider than the middle column right above it).

I have no clue how to go about achieving this. Am I overlooking an option with the block editor? Is it some CSS/HTML that needs to be done? Or is there a plugin that would make this easier?

I'm using the OceanWP theme if that matters.

• plugins
• css
• html
• block-editor
• headers

Share Improve this question asked Oct 22, 2019 at 14:34 Silbernagel EnterprisesSilbernagel Enterprises 111 gold badge11 silver badge22 bronze badges 2

• This should be doable via the block styles API – Tom J Nowell ♦ Commented Oct 22, 2019 at 15:34
• Yes, it's your theme that's allowing all blocks to be full width. Best bet is either create a child theme or try a different theme. – WebElaine Commented Oct 22, 2019 at 19:06

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

• Add a class to the block

• Then you can use css to set width for that block like so:

.your-block-class {
width: 70%;
}

• Add the above css code to your themes custom CSS field or the style.css file in appearance>theme editor. Make sure your using a child theme if you do the later. And of course replace your-block-class above with the class name you created.

EDIT: noticed you did this. I recommend using a % instead of px so it will adapt to mobile, tablets, etc..

You can definitely use CSS as already mentioned.

Before going the CSS route--you might want to use columns like the three columns you have above your "Did you know that store bought ..." section. Using built-in column layouts rather than custom CSS might scale better in the long run.

Here's how it would look like using Gutenberg.

https://i.sstatic.net/Zh2QZ.jpg

On the second row, I used a Gutenberg 3 Column block with something like 5% 90% 5% widths.

You can use the same concept with any page builder that supports column layouts.

I hope that helps.