Responsive centering of images above text blocks in mobile only

Hello,
I am using these types of media & text blocks in a page (alternating down the page with media on the left, text on the right, then vice versa):
class=“wp-block-media-text alignfull has-background is-vertically-aligned-top”

But it looks terrible on moblie with the media/text side by side.

Is it possible in Astrid to just make the image move up above the text and be centered on mobile only?

Hello,

Can you please provide some explanatory screenshots and a link to your website in order to let me check it? You can use some link shortener if you don’t want to leave the link to your site in this topic.

Kind Regards, Roman.
aThemes Support

Sure. I guess I am going to have to make a couple posts because as a new user I can only put one image in a post (ungh).

Site page where it’s most apparent:

How it looks on desktop (just fine):

How it looks on mobile preview from within Wordpress Customize UI:

How it looks on iPhone X in Safari:

Is there any way to make it center the image above the text on mobile? (And center the text below it?)

As it is now, that side-by-side layout is useless on mobile.

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 767px) {
      .wp-block-media-text {
        display: block !important;
      }
    }

Regards,
Kharis
aThemes Support

Super! Thanks!

Now I’ll have to compare that with what I was trying before to see why nothing changed anything.

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support