Ajout de logos dans la section du pied de page

Dev
30

Salut Michele,

Pourrais-tu essayer le code suivant ?

HTML (j’ai supprimé les attributs width des images et ajouté une classe wrap au conteneur) :

<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 :

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

Comment cela s’affiche sur ordinateur :

image
image2498×1369 241 KB

Sur mobile :

image
image393×851 51.2 KB

Qu’en penses-tu ?
La mise en page mobile pourrait être changée en deux colonnes de deux images si elles sont trop petites sur mobile.