Site logo

Archived topic

Gutenberg text and media block stacking

7 replies · Started by Melissa on September 25, 2019

Viewing posts 1–8 of 8

Is it possible to make a given text+media block to stack in the opposite direction?

Hi there,

Can you try this CSS?

@media (max-width: 600px) {
   .wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right {
        grid-template-areas:
           "media-text-media"
           "media-text-content";
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Make sure to clear your caching plugin or server cache. If this doesn't work, can you leave them deactivated for now?

Let me know :)

Perfect on the first shot! Thanks so much!

No problem :)

This fix stopped working with the last Gutenberg update (at least, I think that's what caused it.)
Could you take another look, please? I've turned off caching.

Hmm give this a shot:

@media (max-width: 600px) {
    .wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right .wp-block-media-text__media {
        -ms-grid-row: 1;
        grid-row: 1;
    }
    .wp-block-media-text.is-stacked-on-mobile.has-media-on-the-right .wp-block-media-text__content {
        -ms-grid-row: 2;
        grid-row: 2;
    }
}

Sometimes it's best to check with WordPress support for questions directly related to Gutenberg so they know what people are wanting.

That fixed it. Thanks so much.

I'll drop a note about it on the Gutenberg forum. I haven't tended to find them super-responsive in the past.

No problem :)

And sounds good. Technically we are only supposed to support questions directly related to GP.

This archived topic is closed to new replies.