button "show more"

[AngelaTorres]

Hi,

I'm using magic grid in an image section and wanted to add a button "show more", but I can't do it correctly. It does not show all the elements and is not positioned at the end of the section. I created a codepen so you can see my code.

https://codepen.io/angelatorres92/pen/wvvaxQP

Could you help me with this problem?

Best regards, Ângela Torres

[ademideo]

hey @AngelaTorres,

This is not an issue regarding code from Magic Grid. You should move the Button out of the grid(container). Only grid items should be in the grid.

<div class="container">

    <div class="item">
        <a href="#">
        <img src="https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg">
        <div class="artigo">
            <h3>titulo</h3>
            <h3>subtitulo</h3>
        </div>
        </a>
    </div>
    <div class="item">
        <a href="#">
        <img src="https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg">
        <div class="artigo">
            <h3>titulo</h3>
            <h3>subtitulo</h3>
        </div>
        </a>
    </div>

    <div class="conteudo hidden" id="hidden">
        <div class="item">
            <a href="#">
            <img src="https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg">
            <div class="artigo">
                <h3>titulo</h3>
                <h3>subtitulo</h3>
            </div>
            </a>
        </div>
        <div class="item">
            <a href="#">
            <img src="https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg">
            <div class="artigo">
                <h3>titulo</h3>
                <h3>subtitulo</h3>
            </div>
            </a>
        </div>
    </div>
</div>
<button class="showmore">show more</button>