i updated my post a bit. try it again. you’re going to have to play around with the image sizing to get it how you want. i have no idea what size you want and using 300 for all worked fine for me. the image sizing is going to be a matter of taste.
I am closed to the solution … it is chrome fault…
Apparently in Safari it looks perfect - thank you for your help
now the question is: why chrome does this?
1 Like
i am having no issues in either windows chrome or iOS safari. i used both to do my screenshots and posts. try the updated code i posted. it might fix it.
same issue…
which issue? the chrome sizing issue?
Sorry for being unclear; the issue is that when I use my main browser (Chrome), I cannot see the logo in the footer. When I use Safari, I can see the logos in footer. I also tried to use Chrome on my gf MacBook, and it worked fine for her; we can see the logos in the footer. So there might be something weird with my Chrome; I have no idea what.
I also noticed that on the phone the format is not correctly scaled - do you know how to fix it?
are you wanting the images to shrink and expand with the screen size? you can also make a different footer for mobile view or just put the footer in desktop view. you’ll notce there are sections in the edit HTML/ CSS screen for desktop and mobile, with the same tabs as the common section.
you are likely going to have to experiment with the image sizing html. you will probably want to use relative sizing in percentages but the images are all different sizes so it’s going to be difficult unless you have all same size images. i’m not really clear what you are wanting.
1 Like
someone here much smarter than me suggested that perhaps you should check it in browser incognito mode to rule out any extensions causing issues there.
i suggest you resize the images to similar dimensions that you can work with then use the different desktop and mobile view CSS and FOOTER sections to get what you are looking for.
1 Like
Yes, sorry for not being clear, I would like them to have the logos scaling with the window size, for both the desktop and the mobile.
(using the incognito mode was a brilliant idea 
)
Hi Michele,
Could you try the following code?
HTML (I removed the images width attributes and added a wrap class to the container):
<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%;
}
}
}
How it displays on desktop:
On mobile:
What do you think?
The mobile layout could be changed to two columns of two pictures if they are too small on mobiles.
4 Likes
it works perfectly, thank you all for the great support!
2 Likes
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.