Media & Text Box Not displaying correctly in IE

  • Author
    Posts
  • #142249

    saadatspine
    Member

    The Media & Text block displays the image as full screen above the text in Internet Explorer on saadatspine.com (“Our Mission” on the homepage) instead of to the right of the text. (It’s behaving as it does–correctly– on a mobile platform.)

    Please Advise. Thanks!

    The blog I need help with is saadatspine.com.

    #142316

    anhtnt
    Theme Author

    Hi,

    Thanks for your feedback. I found that it’s a bug in the block editor, which uses “display: grid” (it’s not supported in IE11 yet).

    Here is a quick CSS fix, please go to Customize > CSS and add the following:

    .wp-block-media-text { display: flex; }
    .has-media-on-the-right .wp-block-media-text__media {
        min-width: 50%;
        order: 2;
    }
    .is-stacked-on-mobile { flex-direction: column; }
    #142517

    saadatspine
    Member

    Thank you for the response! I’m not sure if I was confusing… The media (pic of family on the beach) is supposed to appear to the right of the text in desktop view. It was appearing correctly in Chrome, Edge and Safari… in IE, it was appearing below the text. In mobile view, it is supposed to be shown this way (text above the image). Now, the image does not appear correctly in other browsers… The text is above the image. It would be great if it could appear to the right of the text on all desktop browsers.

    Please advise. Thanks!

    #142605

    anhtnt
    Theme Author

    Hi,

    Sorry, please try this CSS (replace the old one). The previous one lacks rules for mobile (and applies to all screen sizes):

    .wp-block-media-text { display: flex; }
    .has-media-on-the-right .wp-block-media-text__media {
        min-width: 50%;
        order: 2;
    }
    @media (max-width: 1023px) {
        .is-stacked-on-mobile { flex-direction: column; }
    }

The topic ‘Media & Text Box Not displaying correctly in IE’ is closed to new replies.