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

Question

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.

Answer 1

• 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..

Answer 2

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.