Overlapping Columns With the Media & Text Block
The Media and Text Block in WordPress creates 2 columns where text can be placed on either side of an image or video. It's quick, easy, and quite versatile. The block's name is a bit misleading, as the "text" column can actually contain any kind of content, not just text. In this tutorial, we'll explore how to use this core block's offerings to build a dynamic layout with overlapping columns. Plus, with a little bit of Additional CSS, you can put the overlapping text inside a container with a background color! Let's check it out.
Mobile Responsiveness
Overlapping columns generally do not look great on mobile devices. There simply isn’t enough room. It’s a good idea to enable “Stack on mobile” in the Media & Text block settings. We need to write additional code is to ensure things look OK on smaller screens. All of the custom CSS code I've used in this tutorial is on my blog.
Full blog post: https://www.askdesign.biz/blog/2025/1...