How to make custom footer not fixed to the bottom in catalogue pages

[eruiz67]

I edited the footer.html template in order to set a custom footer, but since that footer has many elements, it does not give enough space for the dataset's result list (and other catalogue pages). The footer seems to be fixed to the bottom. How can I fix that in order to give more space to the resulsts list There is my code

<footer>

    <div style="display: grid; grid-template-columns: 1fr; grid-template-rows: 2fr 1fr; height:20rem; padding: 1%; background: #033E84;">
        <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows:1fr;">
            <div style="display: flex; justify-content: center; align-items: center;">
                <div style="display: flex; flex-direction: column; color: #fff">
                    <span style="text-align: center; border-bottom: solid 1px; margin: 0 0 6px 0px; font-weight: 600;">Otros enlaces de interés</span>
                    <span><a style="color: #fff;" href="https://consultacf.ineter.gob.ni/">Consulta catastro</a></span>
                    <span><a style="color: #fff;" href="https://tramites.ineter.gob.ni/">Tramites en línea INETER</a></span>
                    <span><a style="color: #fff;" href="https://www.ineter.gob.ni/">INETER</a></span>
                </div>
            </div>
            <div  style="display: flex; justify-content: center; align-items: center;">
                <div style="display: flex; flex-direction: column; color: #fff;">
                    <span style="text-align: center; border-bottom: solid 1px; margin: 0 0 6px 0px; font-weight: 600;">Información de contacto</span>
                    <span>catastro.sugerencias@ineter.gob.ni</span>
                    <span>22249-2763</span>
                </div>
            </div>
            <div style="display: flex; justify-content: center; align-items: flex-end;">
                <img style=" height: 150px; margin: 0 0 6% 0;" src="https://res.cloudinary.com/borozco/image/upload/v1677700876/imagenesTemporales/logo-blanco_qaoitd.png" alt="log3.jpg">
            </div>
        </div>
        <div style="display: flex; justify-content: center; align-items:flex-start">
            <div style="width:90%; border-top: solid 1px #fff; margin: 0 0 0 0 ; padding: 0.5% 0 0 0; display: flex; flex-direction: row; justify-content: center;">
                <div style="width:4%;">
                    <a href="https://www.facebook.com/CatastroNicaragua">
                        <img style="width:65%;" src="https://res.cloudinary.com/borozco/image/upload/v1677769811/imagenesTemporales/Sin_t%C3%ADtulo-1_Mesa_de_trabajo_1_kbiynz.png" alt="logo1">
                    </a>
                </div>
                <div style="width:4%;">
                    <a href="https://twitter.com/CatastroNi">
                        <img style="width:65%;" src="https://res.cloudinary.com/borozco/image/upload/v1677769811/imagenesTemporales/Sin_t%C3%ADtulo-1_Mesa_de_trabajo_1_copia_2_efexhi.png" alt="logo2">
                    </a>
                </div>

                <div style="width:4%;">
                    <a href="https://www.youtube.com/c/DirecciónGeneraldeCatastroFísico">
                        <img style="width:65%;" src="https://res.cloudinary.com/borozco/image/upload/v1677769811/imagenesTemporales/Sin_t%C3%ADtulo-1_Mesa_de_trabajo_1_copia_feryoi.png" alt="logo3">
                    </a>
                </div>

                <div style="width:4%;">
                    <a href="https://instagram.com/catastronicaragua?igshid=YmMyMTA2M2Y=">
                        <img style="width:65%;" src="https://res.cloudinary.com/borozco/image/upload/v1677769811/imagenesTemporales/Sin_t%C3%ADtulo-1_Mesa_de_trabajo_1_copia_3_cbb0c6.png" alt="logo4">
                    </a>
                </div>
            </div>
        </div>
    </div>
</footer>

Here is the result

[kikislater]

Create 2 footers :

• footer (regular footer) : one for other pages with mapstore map
• alternative footer : one for home page for example and others that doesn't need footer like help, about ...

Edit template index, help, about to include alternative footer

[kikislater]

Regarding your code it's better to put style in custom_theme (modifies css) than in other templates. You will encounter some strange appearance if only in html and not css