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.

  • This should be doable via the block styles API – Tom J Nowell Oct 22 '19 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 Oct 22 '19 at 19:06
  • 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..

| improve this answer | |
  • Yea I figured out the CSS before i saw your comment, but using % is definitely a better suggestion! I'll swap over to that shortly, thanks. :) – Silbernagel Enterprises Oct 27 '19 at 23:51

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.


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.

| improve this answer | |
  • The thing is, I don't see those options for columns when editing the Gutenberg columns block. I'm guessing it just isn't available for oceanWP theme? – Silbernagel Enterprises Oct 27 '19 at 23:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.