Media & Text Overlaps Properly Left but not Right

  • Resolved bigfatty

    (@bigfatty)


    2 years, 3 months ago

    Using CSS code with the “Media & Text” block allows the image and content to overlap. Overlapping works perfect when the media is aligned left and content right, but when the media align option is set to the right, the content is no longer on top and is hidden partially under the image. I’m using the WP default 2023 theme, but the 2022 theme responds exactly the same. I’ve included the page link and code.

    .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
margin-right: -100px;
}
.wp-block-media-text:not(.has-media-on-the-right) .wp-block-media-text__content {
margin-left: -100px;
}

    Thanks for any help.

    The page I need help with: [log in to see the link]

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

  • That’s to be expected and is not a bug or related to a particular theme at all.

    By default, the first column goes above when the two columns are stacked vertically… and the first column will go underneath when the two columns overlap…. unless specifically reversed with additional CSS.

    Couple of ways to deal with this, but I guess the easiest way is to simply add a positive z-index to your second CSS, like:

    .wp-block-media-text:not(.has-media-on-the-right) .wp-block-media-text__content {
margin-left: -100px;
z-index: 1;
}
    Thread Starter bigfatty

    (@bigfatty)

    That additional code worked. Thank you for the help.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Media & Text Overlaps Properly Left but not Right’ is closed to new replies.