Add the class mzp-l-split-media-overflow to the media container (mzp-c-split-media) to allow a large image to “bleed” horizontally past the edge of the component (and the viewport). This means some of the image will be hidden so choose your images wisely.


Don’t use this option with videos. Not only will part of the video be hidden, some of the controls would be hidden as well.

<section class="mzp-c-split ">
    <div class="mzp-c-split-bg mzp-t-background-tertiary">
        <div class="mzp-c-split-container">
            <div class="mzp-c-split-body ">

                <h1 class="mzp-u-title-md">Lorem ipsum dolor sit amet</h1>
                <p>Lorem ipsum dolor sit amet, amet dolores tincidunt te sea. His aliquid epicuri detraxit in, cum tantas populo periculis te. Ei vix idque noster.</p>
                <p><a class="mzp-c-button" href="#">Call to action</a></p>

            <div class="mzp-c-split-media mzp-l-split-media-overflow">
                <img class="mzp-c-split-media-asset" src="../../img/image-16-9.jpg" alt="" srcset="../../img/image-16-9-high-res.jpg 2x">