Ho aggiornato un po’ il mio post. Riprova. dovrai giocare con le dimensioni dell’immagine per ottenere il risultato desiderato. non ho idea di quali dimensioni tu voglia e usare 300 per tutte ha funzionato bene per me. le dimensioni dell’immagine saranno una questione di gusti.
Sono vicino alla soluzione… è colpa di Chrome…
A quanto pare su Safari sembra perfetto - grazie per il tuo aiuto
ora la domanda è: perché Chrome fa questo?
1 Mi Piace
Non ho riscontrato problemi né su Windows Chrome né su iOS Safari. Ho usato entrambi per fare i miei screenshot e i miei post. Prova il codice aggiornato che ho pubblicato. Potrebbe risolvere il problema.
stesso problema…
quale problema? il problema del ridimensionamento di Chrome?
Mi scusi per la poca chiarezza; il problema è che quando uso il mio browser principale (Chrome), non riesco a vedere il logo nel footer. Quando uso Safari, riesco a vedere i loghi nel footer. Ho anche provato a usare Chrome sul MacBook della mia ragazza, e per lei ha funzionato bene; possiamo vedere i loghi nel footer. Quindi potrebbe esserci qualcosa di strano con il mio Chrome; non ho idea di cosa.
Ho anche notato che sul telefono il formato non è scalato correttamente, sai come risolvere?
le immagini dovrebbero rimpicciolirsi ed espandersi con le dimensioni dello schermo? puoi anche creare un piè di pagina diverso per la visualizzazione mobile o semplicemente inserire il piè di pagina nella visualizzazione desktop. noterai che ci sono sezioni nella schermata di modifica HTML/CSS per desktop e mobile, con le stesse schede della sezione comune.
probabilmente dovrai sperimentare con l’HTML per il ridimensionamento delle immagini. probabilmente vorrai usare un ridimensionamento relativo in percentuale, ma le immagini sono tutte di dimensioni diverse, quindi sarà difficile a meno che tu non abbia immagini di dimensioni uguali. non mi è molto chiaro cosa desideri.
1 Mi Piace
qualcuno qui molto più esperto di me ha suggerito che forse dovresti controllarlo in modalità di navigazione in incognito per escludere che eventuali estensioni causino problemi lì.
ti suggerisco di ridimensionare le immagini a dimensioni simili con cui puoi lavorare, quindi utilizzare le diverse sezioni CSS e FOOTER per desktop e mobile per ottenere ciò che stai cercando.
1 Mi Piace
Sì, scusa per non essere stato chiaro, vorrei che avessero i loghi che scalano con le dimensioni della finestra, sia per desktop che per mobile.
(usare la modalità incognito è stata un’idea geniale :))
Ciao Michele,
Potresti provare il codice seguente?
HTML (ho rimosso gli attributi width delle immagini e aggiunto una classe wrap al contenitore):
<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%;
}
}
}
Come viene visualizzato sul desktop:
Su mobile:
Cosa ne pensi?
Il layout mobile potrebbe essere modificato in due colonne di due immagini se queste sono troppo piccole sui dispositivi mobili.
4 Mi Piace
funziona perfettamente, grazie a tutti per il grande supporto!
2 Mi Piace
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.