Mozilla Protocol
  • 16.1.0

Split: Media Overflow

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.

No-nos:

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><button class="mzp-c-button" type="button">Call to action</button></p>

            </div>
            <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">
            </div>
        </div>
    </div>
</section>