diff --git a/main/styleguide/source/_patterns/molecules/footer/footer-person-contact.mustache b/main/styleguide/source/_patterns/molecules/footer/footer-person-contact.mustache index e98fad8f511d9e425a48a0d07624bde71c5f7f8e..83a15521aaf23e681f5b5e877a37e57d87e8723f 100644 --- a/main/styleguide/source/_patterns/molecules/footer/footer-person-contact.mustache +++ b/main/styleguide/source/_patterns/molecules/footer/footer-person-contact.mustache @@ -1,4 +1,4 @@ -<div class="flex space-x-2 mb-4 xl:mb-0"> +<div class="flex space-x-2 mb-4 xl:mr-4 xl:mb-0"> <div class="mr-5"> <img class="rounded-full shadow-sm w-16 mb-2" src="https://randomuser.me/api/portraits/women/26.jpg" alt="user image"> diff --git a/main/styleguide/source/_patterns/organisms/footer.mustache b/main/styleguide/source/_patterns/organisms/footer.mustache index 31f9f279c6d646c403a62a9df931b790ae1266b8..9513c8701666366a109a996c0418815d10d97e8c 100644 --- a/main/styleguide/source/_patterns/organisms/footer.mustache +++ b/main/styleguide/source/_patterns/organisms/footer.mustache @@ -149,7 +149,8 @@ </div> <section class="bg-black py-8 xl:pb-36"> <div class="container--wide flex flex-col lg:flex-row lg:justify-between lg:items-end"> - <div class="mb-10 flex flex-col lg:flex-row lg:order-2 lg:mb-0"> + <div class="mb-10 flex flex-col lg:flex-row lg:flex-wrap lg:order-2 lg:mb-0"> + {{> molecules-footer-person-contact }} {{> molecules-footer-person-contact }} {{> molecules-footer-person-contact }} </div> diff --git a/main/templates/main/includes/layout/footer.html b/main/templates/main/includes/layout/footer.html index 1ad964298a84397a7ae2184be35e97edfe06e829..e1f1577c70c00833658c842ae3858763ed206f6f 100644 --- a/main/templates/main/includes/layout/footer.html +++ b/main/templates/main/includes/layout/footer.html @@ -45,9 +45,9 @@ {% if page.root_page.footer_person_list %} <section class="bg-black py-8 xl:pb-36"> <div class="container--wide flex flex-col lg:flex-row lg:justify-between lg:items-end"> - <div class="mb-10 flex flex-col lg:flex-row lg:order-2 lg:mb-0"> + <div class="mb-10 flex flex-wrap flex-col lg:flex-row lg:flex-wrap lg:order-2 lg:mb-0"> {% for person in page.root_page.footer_person_list %} - <div class="flex space-x-2 mb-4 xl:mb-0"> + <div class="flex space-x-2 mb-4 xl:mr-4 xl:mb-0"> <div class="mr-5"> {% image person.value.person.profile_image fill-75x75 as person_profile_image %} <img class="rounded-full shadow-sm w-16 mb-2" src="{{ person_profile_image.url }}"