Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #335720
    Mathias
    Member

    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

    #335734
    minal
    Keymaster

    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

    edit

    ——

    add

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

    Sincerely,

    Minal

    #335747
    Mathias
    Member

    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.

    #335785
    sujeet
    Keymaster

    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

    #335812
    Mathias
    Member

    Hello,

    Thank you for your answer.

    The url:

    https://www.frankenwedding.de/kontakt

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

     

     

    #335816
    sujeet
    Keymaster

    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

    #335838
    Mathias
    Member

    Hello,

    It worked 🙂

    thank you very much 🙂

    #335849
    sujeet
    Keymaster

    Hello Mathias,

    That’s great. Have a good day.

    Regards,

    Sujeet

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.