Joomla.it Forum
Joomla! 4 => Joomla! 4.x => : sgiobbio 02 Oct 2022, 17:08:12
-
il sito web www.convivium.club (http://www.convivium.club) nelle sue pagine interne ha una sidebar laterale che contiene alcuni moduli banner allineati verticalmente. Per esempio, ecco un link con right sidebar: https://www.convivium.club/reportage/convivium/le-ultime-prove (https://www.convivium.club/reportage/convivium/le-ultime-prove)
Su schemi piccoli, tipicamente quelli degli smartphone, la right sidebar collassa e si dispone in basso al fondo: qui l'allineamento verticale, uno sopra all'altro, va benissimo.
Quando collassa su schermi intermedi, per esempio iPad, ci sarebbe tutto lo spazio orizzontale per allineare i moduli su pił colonne, 2 o 3, ma questo non avviene e l'allineamento continua ad essere su una sola colonna verticale, uno sopra all'altro, con un effetto sgradevole sul layout.
Quali regole css potrei aggiungere per ottenere una disposizione a griglia, e senza ridimensionare i singoli moduli?
Grazie a chi mi darą un input su cui lavorare.
-
Mi sembra di avere risolto con le seguenti regole:
@media screen and (min-width: 360px) and (max-width: 991px) {
.container-sidebar-right {
grid-area: side-r;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
}
.container-sidebar-right {
align-items: center;
}