[Resolved] Padding on a Stack on mobile Media & Text Gutenberg block in mobile viewport

[Søren]

I need some padding when using the Media & Text standard Gutenberg block. Here’s on a desktop size:

So when entering mobile size there’s no space between the elements:

I tried to create a custom class with padding-bottom: 50px; but that didn’t seem to do the trick.

[David]

Hi there,

give this CSS a shot:

@media (max-width: 768px) {
    .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
        padding-top: 40px;   
    }
}

[Søren]

Thanks, but shouldn’t this be included in the standard theme?

I mean it is a standard WordPress Gutenberg block, so the theme should take of it and not custom CSS.

[Tom]

As a user, I would prefer the block itself to have this kind of styling instead of the theme.

As a theme developer, I don’t love the idea of adding a bunch of CSS for core blocks, especially when they tend to change up selectors etc..

We’re working on our own set of blocks that will solve this issue 🙂

[Søren]

It’s hard to understand WordPress’ philosophy behind Gutenberg. Now everyone is making their own interpretation of image, column and mixed media blocks. The world of plugins has entered blocks.

One WordPress developer said it was theme developers who should style and you say the opposite 😀 I can imagine that it is a game of who’s who responsibility.

But I’m looking forward to see your blocks, do you have a circa target date?

[David]

WP’s ‘direction’ with the block editor is definitely blurring the lines between what is theme and what is block level styling. Especially as they look to evolve the Theme customizer and provide the ability to edit theme elements from within the editor.

Currently we’re looking at pushing GP 2.4 and GPP 1.9 alpha updates out this week. After that we will focusing on the Block Plugin alpha release, which is almost ready. Date not confirmed but very soon .

[Author]

Posts