# Adding logos in footer section

**URL:** <https://meta.discourse.org/t/adding-logos-in-footer-section/267365>\
**Category:** Development\
**Created:** [June 6, 2023, 8:00am UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365 "2023-06-06T08:00:57Z")\
**Posts on this page:** 1\
**Showing post:** 30

<div class="post-metadata">

**Author:** ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)\
**Post date:** [June 8, 2023, 10:09am UTC](https://meta.discourse.org/t/adding-logos-in-footer-section/267365/30 "2023-06-08T10:09:31Z")

</div>

Hi Michele,

Could you try the following code?

HTML (I removed the images `width` attributes and added a `wrap` class to the container):

```html
<div class="wrap custom-footer-image">
    <a href="https://www.wur.nl/en.htm/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/f2f2e6d11a09f6ceadecf437c48b24c8f44ea76d.png" alt="Footer Image"></a>
    <a href="https://www.cirad.fr/en/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/d0cf79c6442d594dc4efe3a009cd04c277f9bea8.png" alt="Footer Image"></a>
    <a href="https://www.uni-goettingen.de/en/1.html/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/0da449a3a30e30eaa4467e96189b7bd4e0a28a64.png" alt="Footer Image"></a>
    <a href="http://algorithmicbotany.org/"><img src="https://cdck-file-uploads-europe1.s3.dualstack.eu-west-1.amazonaws.com/standard21/uploads/fspm/original/1X/27ca1fc832ecd29153d2ff150011e0dc056d4f93.png" alt="Footer Image"></a>
</div>

```

CSS:

```css
.custom-footer-image {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    a {
    flex: 1;
    text-align: center;
        img {
            max-width: 100%;
        }
    }
}

```

How it displays on desktop:

 ![image](https://global.discourse-cdn.com/meta/original/4X/9/d/3/9d3a38c97de2c519bbe7928f3dccd2823d84bdd6.png)

On mobile:

 ![image](https://global.discourse-cdn.com/meta/original/4X/2/1/7/217373f01cd919f0d118f6f8706dadbfa9ab684c.png)

What do you think?

The mobile layout could be changed to two columns of two pictures if they are too small on mobiles.

---

_[View the full topic](https://meta.discourse.org/t/adding-logos-in-footer-section/267365)._