Hallo liebes Forum,
ich helfe gerade einem Freund beim Aufbau seiner Seite.
Bin eigentlich DevOps Mensch und mir stellt sich gerade die Frage,
warum der Footer kaputt aussieht, obwohl der html code die Bündigkeit der FooterElemente im Titel linksgerichtet ist.
Allerdings verrutscht der Titel und das ganze sieht nicht mehr schön aus.
Hant Ihr vlt. eine Idee woran das liegen könnte?
Anbei ein Screenshot und die twig Datei zum Footer.
Vielen Dank, wir würden uns sehr über eine Antwort freuen.
Freundliche Grüße
{% sw_extends '@Storefront/storefront/layout/footer/footer.html.twig' %}
{% block layout_footer_inner_container %}
<div class="container">
{% block layout_footer_navigation %}
<div id="footerColumns"
class="row footer-columns"
data-collapse-footer="true">
<div class="col-md-1"></div>
{% block layout_footer_navigation_hotline %}
<div class="col-md-2 footer-column js-footer-column">
{% block layout_footer_navigation_hotline_headline %}
<div class="footer-column-headline footer-headline js-footer-column-headline js-collapse-footer-column-trigger"
id="collapseFooterHotlineTitle"
data-target="#collapseFooterHotline"
aria-expanded="true"
aria-controls="collapseFooterHotline">
{{ 'contact.headline'|trans|sw_sanitize }}
</div>
{% endblock %}
{% block layout_footer_navigation_hotline_content %}
<div id="collapseFooterHotline"
class="footer-column-content collapse js-footer-column-content footer-contact"
aria-labelledby="collapseFooterHotlineTitle">
<div class="footer-column-content-inner">
<p>
{{ 'contact.company.adress'|trans|sw_sanitize }}
</p>
</div>
<div class="footer-column-content-inner">
<br>
<p>
{{ 'contact.company.whatsapp'|trans|sw_sanitize }}
</p>
<img src="/media/8a/33/60/1661035882/whatsapp-logo.png" width="40" height="40" alt="Whatsapp"></a>
</div>
<div>
{{ 'footer.link.contactform'|trans|sw_sanitize }}
<br>
<a href="/Kontakt"><img src="/media/94/42/1c/1661034765/image.png" width="70" height="70" alt="Kontakt"></a>
</div>
<!--
<div class="footer-contact-form">
{{ 'footer.serviceContactLink'|trans({
'%url%': path('frontend.cms.page', { id: config('core.basicInformation.contactPage') })
})|raw }}
</div>
-->
</div>
{% endblock %}
</div>
{% endblock %}
{% block layout_footer_navigation_columns %}
{% for root in page.footer.navigation.tree %}
{% block layout_footer_navigation_column %}
<div class="col-md-2 footer-column js-footer-column">
{% block layout_footer_navigation_information_headline %}
<div class="footer-column-headline footer-headline js-collapse-footer-column-trigger"
data-target="#collapseFooterTitle{{ loop.index }}"
aria-expanded="true"
aria-controls="collapseFooter{{ loop.index }}">
{% if root.category.type == 'folder' %}
{{ root.category.translated.name }}
{% else %}
<a href="{{ category_url(root.category) }}"
{% if category_linknewtab(root.category) %}target="_blank"{% endif %}
title="{{ root.category.translated.name }}">
{{ root.category.translated.name }}
</a>
{% endif %}
{% block layout_footer_navigation_information_icons %}
<div class="footer-column-toggle">
<span class="footer-plus-icon">
{% sw_icon 'plus' %}
</span>
<span class="footer-minus-icon">
{% sw_icon 'minus' %}
</span>
</div>
{% endblock %}
</div>
{% endblock %}
{% block layout_footer_navigation_information_content %}
<div id="collapseFooter{{ loop.index }}"
class="footer-column-content collapse js-footer-column-content"
aria-labelledby="collapseFooterTitle{{ loop.index }}">
<div class="footer-column-content-inner">
{% block layout_footer_navigation_information_links %}
<ul class="list-unstyled">
{% for treeItem in root.children %}
{% set category = treeItem.category %}
{% set name = category.translated.name %}
{# @deprecated tag:v6.5.0 - Use "category.translated.externalLink" directly or category_url function instead. #}
{% set externalLink = category.translated.externalLink %}
{% block layout_footer_navigation_information_link_item %}
<li class="footer-link-item">
{% block layout_footer_navigation_information_link %}
{% if category.type == 'folder' %}
<div>{{ name }}</div>
{% else %}
<a class="footer-link"
href="{{ category_url(category) }}"
{% if category_linknewtab(category) %}target="_blank"{% endif %}
title="{{ name }}">
{{ name }}
</a>
{% endif %}
{% endblock %}
</li>
{% endblock %}
{% endfor %}
</ul>
{% endblock %}
{% if root.category.customFields.custom_category_navigation_data_text %}
<div class="footer-append-icons">
{{ root.category.customFields.custom_category_navigation_data_text|raw }}
</div>
{% endif %}
</div>
</div>
{% endblock %}
</div>
{% endblock %}
{% endfor %}
{% endblock %}
</div>
{% endblock %}
<!--
{% block layout_footer_payment_shipping_logos %}
<div class="footer-logos">
{% block layout_footer_payment_logos %}
{% for paymentMethod in page.salesChannelPaymentMethods %}
{% block layout_footer_payment_logo %}
{% if paymentMethod.media %}
<div class="footer-logo is-payment">
{% sw_thumbnails 'footer-payment-image-thumbnails' with {
media: paymentMethod.media,
sizes: {
'default': '100px'
},
attributes: {
'class': 'img-fluid footer-logo-image',
'alt': (paymentMethod.media.translated.alt ?: paymentMethod.translated.name),
'title': (paymentMethod.media.translated.title ?: paymentMethod.translated.name)
}
} %}
</div>
{% endif %}
{% endblock %}
{% endfor %}
{% endblock %}
{% block layout_footer_shipping_logos %}
{% for shippingMethod in page.salesChannelShippingMethods %}
{% block layout_footer_shipping_logo %}
{% if shippingMethod.media %}
<div class="footer-logo is-shipping">
{% sw_thumbnails 'footer-shipping-image-thumbnails' with {
media: shippingMethod.media,
sizes: {
'default': '100px'
},
attributes: {
'class': 'img-fluid footer-logo-image',
'alt': (shippingMethod.media.translated.alt ?: shippingMethod.translated.name),
'title': (shippingMethod.media.translated.title ?: shippingMethod.translated.name)
}
} %}
</div>
{% endif %}
{% endblock %}
{% endfor %}
{% endblock %}
</div>
{% endblock %}
-->
</div>
{% block layout_footer_bottom %}
<div class="footer-bottom">
{% block layout_footer_service_menu %}
<div class="container">
{% block layout_footer_service_menu_content %}
{% apply spaceless %}
<ul class="footer-service-menu-list list-unstyled">
{% for serviceMenuItem in page.header.serviceMenu %}
{% block layout_footer_service_menu_item %}
<li class="footer-service-menu-item">
<a class="footer-service-menu-link"
href="{{ category_url(serviceMenuItem) }}"
{% if category_linknewtab(serviceMenuItem) %}target="_blank"{% endif %}
title="{{ serviceMenuItem.translated.name }}">
{{ serviceMenuItem.translated.name }}
</a>
</li>
{% endblock %}
{% endfor %}
</ul>
{% endapply %}
{% endblock %}
</div>
<div class="footer-logo">
<div class="row">
<div class="col-12 col-md-4">
</div>
<div class="col-12 col-md-4">
<img src="{{ "logo.inverted"|trans|sw_sanitize }}" alt="logo" />
</div>
<div class="col-12 col-md-4">
<div class="row">
<div style="text-align:right" class="col-6">
<!-- HTML der für diesen Fall unwichtig ist -->
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block layout_footer_vat %}
<div class="footer-vat">
{% if context.taxState == "gross" %}
<p>
{{ "footer.includeVat"|trans({
'%url%': path('frontend.cms.page',{ id: config('core.basicInformation.shippingPaymentInfoPage') })
})|raw }}
</p>
{% else %}
<p>
{{ "footer.excludeVat"|trans({
'%url%': path('frontend.cms.page',{ id: config('core.basicInformation.shippingPaymentInfoPage') })
})|raw }}
</p>
{% endif %}
</div>
{% endblock %}
{% block layout_footer_copyright %}
<div class="footer-copyright">
{% sw_icon 'shopware' style {'size':'xs'} %}
{{ "footer.copyrightInfo"|trans|sw_sanitize }}
</div>
{% endblock %}
</div>
{% endblock %}
{% endblock %}