[3.3.x] Styles Support & Discussion • Footer in columns

Code:

{% EVENT overall_footer_content_after %}</div>{% EVENT overall_footer_page_body_after %} </div><div id="page-footer" class="page-footer" role="contentinfo">{% INCLUDE 'navbar_footer.html' %}<div class="copyright">{% EVENT overall_footer_copyright_prepend %}<div class="ana4life-copyright">  <div class="socialinks">    <ul>      <li>        <a type="application/rss+xml" href="/feed?sid=04c5960a339db2024bd4e9497169ab52">          <i class="icon fp-feed" title="Feed - ana4life"></i>        </a>      </li>      <li>        <a href="https://www.instagram.com/ana4life_nl/" title="Instagram">          <i class="icon fp-instagram"></i>        </a>      </li>      <li>        <a href="https://twitter.com/ana4life_nl" title="X">          <i class="icon fp-twitter"></i>        </a>      </li>    </ul>  </div>    <div class="openingsuren">   <b>Openingsuren:</b>       <table>            <tr><th>Maandag</th><td>6:00uur - 01:00uur</td></tr>            <tr><th>Dinsdag</th><td>6:00uur - 01:00uur</td></tr>            <tr><th>Woensdag</th><td>6:00uur - 01:00uur</td></tr>            <tr><th>Donderdag</th><td>6:00uur - 01:00uur</td></tr>            <tr><th>Vrijdag</th><td>6:00uur - 01:00uur</td></tr>        <tr><th>Zaterdag</th><td>6:00uur - 01:00uur</td></tr>        <tr><th>Zondag</th><td>6:00uur - 01:00uur</td></tr>       </table>    </div>  © 2017 - 2024 <a href="https://www.ana4life.nl">ana4life.nl</a> by Shadow All rights reserved <br>  <br>  Any use, reproduction or representation, by any process whatsoever,<br> and on any medium whatsoever, of all or part of the site and / or the elements, <br> that compose it is prohibited without the consent of the website owner.  <br><br>  Met dank aan: <br></div><p class="footer-row"><span class="footer-copyright">{{ CREDIT_LINE }}</span></p><p class="footer-row"><span class="footer-copyright">prosilver French edition {{ lang('POST_BY_AUTHOR') }} <a href="https://www.phpbb-fr.com/">phpBB-fr.com</a></span></p>{% if TRANSLATION_INFO %}<p class="footer-row"><span class="footer-copyright">{{ TRANSLATION_INFO }}</span></p>{% endif %}{% EVENT overall_footer_copyright_append %}<p class="footer-row" role="menu"><a class="footer-link" href="{{ U_PRIVACY }}" title="{{ lang('PRIVACY_LINK') }}" role="menuitem"><span class="footer-link-text">{{ lang('PRIVACY_LINK') }}</span></a>|<a class="footer-link" href="{{ U_TERMS_USE }}" title="{{ lang('TERMS_LINK') }}" role="menuitem"><span class="footer-link-text">{{ lang('TERMS_LINK') }}</span></a></p>{% if DEBUG_OUTPUT %}<p class="footer-row"><span class="footer-info">{{ DEBUG_OUTPUT }}</span></p>{% endif %}{% if U_ACP %}<p class="footer-row"><a class="footer-link text-strong" href="{{ U_ACP }}">{{ lang('ACP') }}</a></p>{% endif %}</div>         <div id="darkenwrapper" class="darkenwrapper" data-ajax-error-title="{{ lang('AJAX_ERROR_TITLE') }}" data-ajax-error-text="{{ lang('AJAX_ERROR_TEXT') }}" data-ajax-error-text-abort="{{ lang('AJAX_ERROR_TEXT_ABORT') }}" data-ajax-error-text-timeout="{{ lang('AJAX_ERROR_TEXT_TIMEOUT') }}" data-ajax-error-text-parsererror="{{ lang('AJAX_ERROR_TEXT_PARSERERROR') }}"><div id="darken" class="darken">&nbsp;</div></div><div id="phpbb_alert" class="phpbb_alert" data-l-err="{{ lang('ERROR') }}" data-l-timeout-processing-req="{{ lang('TIMEOUT_PROCESSING_REQ') }}"><a href="#" class="alert_close"><i class="icon fa-times-circle fa-fw" aria-hidden="true"></i></a><h3 class="alert_title">&nbsp;</h3><p class="alert_text"></p></div><div id="phpbb_confirm" class="phpbb_alert"><a href="#" class="alert_close"><i class="icon fa-times-circle fa-fw" aria-hidden="true"></i></a><div class="alert_text"></div></div></div><div><a id="bottom" class="anchor" accesskey="z"></a>{% if not S_IS_BOT %}{{ RUN_CRON_TASK }}{% endif %}</div><script src="{T_TEMPLATE_PATH}/fa6_kit.js" crossorigin="anonymous"></script><script src="{{ T_JQUERY_LINK }}"></script><!-- IF S_ALLOW_CDN --><script>window.jQuery || document.write('\x3Cscript src="{T_ASSETS_PATH}/javascript/jquery-3.7.1.min.js?assets_version={T_ASSETS_VERSION}">\x3C/script>');</script><!-- ENDIF --><script src="{{ T_ASSETS_PATH }}/javascript/core.js?assets_version={{ T_ASSETS_VERSION }}"></script>{% INCLUDEJS 'forum_fn.js' %}{% INCLUDEJS 'ajax.js' %}<script src="{{ T_TEMPLATE_PATH }}/functions.js?assets_version={{ T_ASSETS_VERSION }}"></script>{% if S_ALLOW_CDN %}<script>(function($){var $fa_cdn = $('head').find('link[rel="stylesheet"]').first(),$span = $('<span class="fa" style="display:none"></span>').appendTo('body');if ($span.css('fontFamily') !== 'FontAwesome' ) {$fa_cdn.after('<link href="{{ T_ASSETS_PATH }}/css/font-awesome.min.css" rel="stylesheet">');$fa_cdn.remove();}$span.remove();})(jQuery);</script>{% endif %}{% if S_COOKIE_NOTICE %}<script src="{{ T_ASSETS_PATH }}/cookieconsent/cookieconsent.min.js?assets_version={{ T_ASSETS_VERSION }}"></script><script>if (typeof window.cookieconsent === "object") {window.addEventListener("load", function(){window.cookieconsent.initialise({"palette": {"popup": {"background": "var(--color05)"},"button": {"background": "var(--color09)"}},"theme": "classic","content": {"message": "{{ lang('COOKIE_CONSENT_MSG')|escape('js') }}","dismiss": "{{ lang('COOKIE_CONSENT_OK')|escape('js') }}","link": "{{ lang('COOKIE_CONSENT_INFO')|escape('js') }}","href": "{{ UA_PRIVACY }}"}});});}</script>{% endif %}{% INCLUDEJS 'particles.min.js' %}{% INCLUDEJS 'particles.app.js' %}{% EVENT overall_footer_after %}{% if S_PLUPLOAD %}{% INCLUDE 'plupload.html' %}{% endif %}{{ definition.SCRIPTS }}<script>            $(function($) {                var num_cols = 3,                container = $('.sub-forumlist'),                listItem = 'li',                listClass = 'sub-list';                container.each(function() {                    var items_per_col = new Array(),                    items = $(this).find(listItem),                    min_items_per_col = Math.floor(items.length / num_cols),                    difference = items.length - (min_items_per_col * num_cols);                    for (var i = 0; i < num_cols; i++) {                        if (i < difference) {                            items_per_col[i] = min_items_per_col + 1;                        } else {                            items_per_col[i] = min_items_per_col;                        }                    }                    for (var i = 0; i < num_cols; i++) {                        $(this).append($('<ul ></ul>').addClass(listClass));                        for (var j = 0; j < items_per_col[i]; j++) {                            var pointer = 0;                            for (var k = 0; k < i; k++) {                                pointer += items_per_col[k];                            }                            $(this).find('.' + listClass).last().append(items[j + pointer]);                        }                    }                });            });            </script><script>$(document).on('click', 'a[href^="#"]', function (event) {    event.preventDefault();    $('html, body').animate({        scrollTop: $($.attr(this, 'href')).offset().top    }, 300);});</script>{% EVENT overall_footer_body_after %}</body></html>

Code:

.footer-row {font-size: 10px;line-height: 1.8;margin: 0;max-width: 960px;    margin-inline: auto;}.copyright {background-color: var(--color19);text-align: left;}.ana4life-copyright {font-size: 10px;line-height: 1.8;margin: 0;max-width: 960px;    margin-inline: auto;}.openingsuren {float: right;margin: 0;clear: both;}.socialinks {float: right;padding: 5px 10px;}@media (max-width: 700px) {.socialinks {float: none;text-align: center;}}.socialinks > ul {display: inline-block;}.socialinks ul  li {float: right;list-style-type: none;padding: 5px;opacity: 0.75;transition: opacity 0.25s;}.socialinks ul  li:hover {opacity: 1;}.socialinks ul li a i:before {color: var(--color01);padding: 5px;}