[Mathias]

Hello, I have a question about media + text (hero content). In mobile view, the image is always before the text. Is there a way to display the image after the text in the mobile version? Thank you very mcuh

[minal]

Hello @mathias

Here is the CSS snippet for you to achieve that feat

@media screen and (max-width: 37.5em) {
  .wp-block-hero-content-default .wp-block-media-text {
    flex-direction: column;
    display: flex;
  }
  .wp-block-hero-content-default .wp-block-media-text .wp-block-media-text__media {
    margin-bottom: 0;
  }
}

to add this css go to Dashboard >> Appearance >> Editor >> Templates >> Front page

——

If this did not work, please share your site URL so that we can check thoroughly

Sincerely,

Minal

[Mathias]

Hello Minal,

thank you very much for the quick answer.

I have included the CSS as indicated. Unfortunately it doesn’t work.

My homepage is not online yet. Do you perhaps have another idea? When my site is online, I can show you.

[sujeet]

Hello Mathias,

Sorry to hear that, but we again tested the code that we provided you , here it worked. The image is after the text in mobile view.

And Mathias, this is the default setting of WordPress itself for media + text block. So we must add an additional css.

So will you please get back to us with your site url once your site is on?

Thank you.

Regards,
Sujeet

[Mathias]

Hello,

Thank you for your answer.

The url:

https://www.frankenwedding.de/kontakt

I would be happy if you have an idea. Thank you

 

 

[sujeet]

Hello Mathias,

Thank you so much for the site url. Please kindly add the following code to your addtional css and let me know please.

@media screen and (max-width: 37.5em) {
  .wp-block-media-text {
      display: flex !important;
      flex-direction: column-reverse !important;
  }
  .wp-block-media-text .wp-block-media-text__media {
      margin-top: 14px !important;
  }
  .wp-block-media-text.has-media-on-the-right {
      flex-direction: column !important;
  }
}

Thank you.

Regards,
Sujeet

[Mathias]

Hello,

It worked 🙂

thank you very much 🙂

[sujeet]

Hello Mathias,

That’s great. Have a good day.

Regards,

Sujeet

[Author]

Posts