Image Columns within CMS Rich Text Element

Design help Custom code
1

I want to be able to create responsive image columns within a CMS rich text element for blog posts. I have tried playing around with adding some custom code to create a 3 column layout that stacks on mobile, but I don’t work with code very often and I thought maybe someone who has a better understanding of HTML and CSS might be able to help.

It’s especially frustrating, because you can’t preview the custom code without publishing the post, so if there are errors, the only way to test is to make it public (as far as I know).

3

Here is the code I’ve tried:

In the tag for the CMS collection template page:

<style>
.rte-container{
    display:flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    
}
img{
    width:100%;
    height:auto;
}
.box{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width:25rem;
    min-width:18rem;
    margin: 10px;
    text-align: center;

}
    
    </style>

**And then in an HTML embed within the rich text element:**

<div class="rte-container">
        <div class="box">
            <figure><img src="https://uploads-ssl.webflow.com/60007d4a30775307143ac96b/619140cf06154e924c382685_sketchbook1_interior1.jpg">
            <figcaption>I drew this on a video call with friends during the height of the pandemic. I don't remember what "dad adrenaline" means.</figcaption></figure>
        </div>
        <div class="box">
            <figure><img src="https://uploads-ssl.webflow.com/60007d4a30775307143ac96b/619140cd514f505ee626f58f_sketchbook1_interior2.jpg">
            <figcaption> </figcaption></figure>
        </div>
        <div class="box">
            <figure><img src="https://uploads-ssl.webflow.com/60007d4a30775307143ac96b/619140cfd6736d2553c57d17_sketchbook1_interior3.jpg">
            <figcaption>Foraging research. I love learning about edible plants, but have a hard time remembering all of the details so I don't actually forage often unless it's a plant that I'm 1,000% sure about.</figcaption></figure>
        </div>
        <div class="box">
            <figure><img src="https://uploads-ssl.webflow.com/60007d4a30775307143ac96b/619140ce418b84bbbfe64c1b_sketchbook1_interior4.jpg">
            <figcaption>I think I drew the sloth on the right at the Museum of Natural History at the University of Iowa. They have a giant prehistoric sloth there and it's a fun place to hang out and sketch. Pretty sure this was a time that there was a bro talking really loud on the phone near me, which put a little bit of a damper on the experience.</figcaption></figure>
        </div>
        <div class="box">
            <figure><img src="https://uploads-ssl.webflow.com/60007d4a30775307143ac96b/619140cfdc1f69cb5bb00bea_sketchbook1_interior5.jpg">
            <figcaption>Initial sketch that would later become a woodblock for relief printing.</figcaption></figure>
        </div>
        <div class="box">
            <figure><img src="https://uploads-ssl.webflow.com/60007d4a30775307143ac96b/619140cf78c8b384ccd3ae9c_sketchbook1_interior6.jpg">
            <figcaption>I drew this in the "getting ready" room at my pal Louise's wedding. The venue had a cow-skin rug.</figcaption></figure>
        </div>
</div>