Display Gutenberg Block by Screen Size

Gutenberg block on different screen sizes example
Two different blocks, each for it’s own screen size

Gutenberg blocks are responsive by default, but the design and content of your blocks may not fit every size screen.

Conditional Blocks lets you specifically set which screen size each block should appear on. You can choose from the following screen sizes.

  1. Mobile size
  2. Tablet size
  3. Desktop size

Blocks appear on all screen sizes by default. Use the Screen Size toggles to hide the block from any sizes that the content does not suit. You can toggle multiple sizes per block to get the right fit.