code for a full width flex section in Squarespace

full-width-flex.html

<!--Add this to your custom CSS tab in Squarespace-->
<style>
    .flex-row {
        display: flex;
        height: 100%;
    }

    .breakout {
        margin-left: calc(~"50% - 50vw");
        margin-right: calc(~"50% - 50vw");
    }

    .flex-1 {
        flex: 1;
    }

    .flex-2 {
        background: #fafafa;
        flex: 1;
        display: flex;
        align-items: center;

    }

    .flex-2 div {
        flex: 1;
        padding: 20% 15%;
    }

    .row-reverse {
        flex-flow: row-reverse;
    }

    .flex-row img {
        width: 100%;
        height: 100%;
        max-height: 600px;
        object-fit: cover;
        display: block;
    }

    @media(max-width: 768px) {
        .flex-row {
            flex-flow: column;
        }

        .flex-2>div {
            margin-left: unset;
            padding-top: 20%;
            padding-bottom: 20%;
            padding-left: 6vw;
            padding-right: 6vw;

        }
    }
</style>

<!--Add this to a Code Block in Squarespace-->
<div class="flex-row breakout">
    <div class="flex-1">
        <img src="https://source.unsplash.com/random/?skateboarder">
    </div>
    <div class="flex-2">
        <div>
            <h2>
                Feature One
            </h2>
            <p>
                This is where you talk about all the good things you can do. Don't be afraid to show off.
            </p>
        </div>
    </div>
</div>

<!--If you want to reverse the image/text add the class "row-reverse" you can see an example on the div directly below-->
<div class="flex-row row-reverse breakout">
    <div class="flex-1">
        <img src="https://source.unsplash.com/random/?skateboarding">
    </div>
    <div class="flex-2">
        <div>
            <h2>
                Feature Two
            </h2>
            <p>
                Wowzers even more space to talk about yourself. Even better. Feel free to share a big story about
                yourself and how you can help others.
            </p>
        </div>
    </div>
</div>

<!--If you want to continue adding rows copy/paste all the HTML starting at "flex-row" and paste it right after another flex-row-->
<div class="flex-row breakout">
    <div class="flex-1">
        <img src="https://source.unsplash.com/random/?skateboards">
    </div>
    <div class="flex-2">
        <div>
            <h2>
                Feature Three
            </h2>
            <p>
                Stuck in the middle, you could have two cool images on either side to showoff your product or service.
                I've talked about showing off a lot. Yikes!
            </p>
        </div>
    </div>
    <div class="flex-1">
        <img src="https://source.unsplash.com/random/?skateboarder,skateboarding">
    </div>
</div>