Using divs and Flexbox within Footer?

Open Q&A
,
1

I’m using Autocomplete’s Classic theme and wanting to display three products horizontally in the container’s footer with Flexbox, like so:

footer({ html }) {
    return html`
        <div>
            <img width="100" height="100" src="product1.jpg">
            <a href="product1.html">Product 1</a>
        </div>
        <div> 
            <img width="100" height="100" src="product2.jpg">
            <a href="product2.html">Product 2</a>
        </div>
        <div>
            <img width="100" height="100" src="product3.jpg">
            <a href="product3.html">Product 3</a>
        </div>
    `;
}

I’ve set .aa-SourceFooter to display as flex:

.aa-SourceFooter {
    display: flex;
    justify-content: space-between;
}

This outputs the word “div” in the footer, and displays the third image, but nothing else, leading me to believe something is broken with the HTML parsing.

I’ve also tried:

  • Changing the double quotes to single quotes and no quotes at all
  • Removing the divs and anchors and showing just the three images side-by-side
  • Removing display: flex from .aa-SourceFooter and putting it on a nested div inside .aa-SourceFooter

Two questions:

  1. Is .aa-SourceFooter limited by what you can do in it, and is the scenario above beyond its capabilities?

  2. Is there a dev/testing flag (or other method), so you don’t eat through your search budget while trialing changes?

Thanks in advance!