- This topic has 7 replies, 3 voices, and was last updated 3 months ago by
sujeet.
-
AuthorPosts
-
May 30, 2024 at 3:42 pm #335720
Mathias
ParticipantHello, 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
May 31, 2024 at 12:47 am #335734minal
KeymasterHello @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
May 31, 2024 at 1:39 pm #335747Mathias
ParticipantHello 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.
June 3, 2024 at 1:32 am #335785sujeet
KeymasterHello 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,
SujeetJune 3, 2024 at 4:45 am #335812Mathias
ParticipantHello,
Thank you for your answer.
The url:
https://www.frankenwedding.de/kontakt
I would be happy if you have an idea. Thank you
June 3, 2024 at 5:26 am #335816sujeet
KeymasterHello 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,
SujeetJune 3, 2024 at 1:24 pm #335838Mathias
ParticipantHello,
It worked 🙂
thank you very much 🙂
June 4, 2024 at 12:40 am #335849sujeet
KeymasterHello Mathias,
That’s great. Have a good day.
Regards,
Sujeet
-
AuthorPosts
- You must be logged in to reply to this topic.