Media & text block

  • Resolved jeanaesch

    (@jeanaesch)


    4 years, 7 months ago

    Hi all
    I placed multiple images and corresponding text by using the media & text block. The images are displayed alternately on the left and on the right side. This looks very good on desktop and tablet screens, but not on small screens like mobile phones where the text is shown in one column alternately below or above the image. The “stack on mobile” option is enabled.
    I am looking for an advice for the above scenario in order to display the text on small screens always above the images.
    Best regards
    Jean

Viewing 6 replies - 1 through 6 (of 6 total)

  • I think in this situation you would need some custom CSS to help you achieve the layout you want. If you can share the page you are working on, someone may be able to give you the CSS to add to your theme.

    Thread Starter jeanaesch

    (@jeanaesch)

    Hi James

    Thanks. The url of the mentioned page is https://jac.areinigung.ch/test-jean-eins/ (language is german). I would like to have the text blocks always above the image for the one column mobile display.

    Best regards
    Jean

    Hi Jean

    You need to add this to your themes CSS somewhere (try adding Custom CSS via Customizer or Edit Theme > style.css)

    @media (max-width: 600px) {
.wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile figure.wp-block-media-text__media {
grid-row: 1
}
.wp-block-media-text.has-media-on-the-right.is-stacked-on-mobile div.wp-block-media-text__content {
grid-row: 2
}
}

    This puts the image on top for the Media & Text Block, when Media is on Right and Is Stacked on Mobile is selected.

    Thread Starter jeanaesch

    (@jeanaesch)

    Hi James

    Many thanks. I works how you described it. However, can you modify your CSS in order to put the text on top of the Media & Text Block.

    Best regards
    Jean

    Oops sorry, haha I had it in my mind that you wanted the image first.

    Try this:

    
@media (max-width: 600px) {
.wp-block-media-text.is-stacked-on-mobile:not(.has-media-on-the-right) figure.wp-block-media-text__media {
grid-row: 2;
}

.wp-block-media-text.is-stacked-on-mobile:not(.has-media-on-the-right) div.wp-block-media-text__content {
grid-row: 1;
}
}

    This puts the TEXT on top for the Media & Text Block, when Stacked on Mobile is selected (but not when Media is on Right).

    Hope that helps

    • This reply was modified 4 years, 7 months ago by James Hunt.
    • This reply was modified 4 years, 7 months ago by James Hunt.
    Thread Starter jeanaesch

    (@jeanaesch)

    Hi James

    Just perfect. Many thanks.
    Best regards from Switzreland

    Jean

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Media & text block’ is closed to new replies.