Niente... non ne vengo a capo
Ho fatto altre prove, i problemi che vorrei risolvere nella versione della tabella semplificata sono:
- non vedere una riga con un solo elemento dopo una con 3 ... ma avere righe sempre con gli stessi elementi (4 4, 3 3 2, 2 2 2 2, 1 1 1 1 1 1 1 1 1)
- avere la tabella centrata nella pagina, ora collocata nel mio layout è allineata a destra
Grazie infinite!!!!!
Iceberg
La cosa in effetti non è così semplice. Con un po' d'impegno è anche possibile applicare una delle varie soluzioni proposte in questa discussione ma ovviamente apportare delle personalizzazioni non è poi alla portata di tutti. Ho visto che questo tipo di richiesta ultimamente viene fatta spesso (in varie salse), per cui ho colto questa occasione per elaborare una possibile soluzione con flexbox; ne ho fatto una supposta (vedi qui).
Prova ad applicarla al tuo progetto e fammi sapere come va.
Se hai bisogno di chiarimenti o di consigli per eventuali personalizzazioni, puoi chiedere proseguendo qui stesso.
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Spettacolare!!! Grazie KillerWorm, funziona e l'ho già personalizzata!
Un solo dubbio, sopra e sotto la caption (testo sotto l'immagine) è possibile avere due righe, tipo questa immagine:
https://www.dropbox.com/s/vo4t6xjan1...demo.jpeg?dl=0
Grazie!!!!!
Iceberg
BeneSpettacolare!!! Grazie KillerWorm, funziona e l'ho già personalizzata!
Penso di sì, ma intendi due righe vuote (cioè uno spazio sopra e sotto la riga di testo) o i due bordi arancioni?Un solo dubbio, sopra e sotto la caption (testo sotto l'immagine) è possibile avere due righe, tipo questa immagine:
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Rileggendo meglio è plausibile che tu intenda i bordi sottili.
Puoi aggiungere una cosa del genere per il selettore .picsponsive>figure>figcaption:
Questo aggiunge all'elemento figcaption i due bordi, superiore e inferiore, di 1px. Ovviamente puoi modificare i diversi valori come preferisci.codice:border: solid #C0D1CE; border-width: 1px 0;
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Grazie KillerWorn, ora provo il tuo suggerimento per le righe! Grazi
Sto studiando la struttura perché il tuo mi sembra un approccio molto pulito ed utilizzabile in vari contesti!
Come posso ridurre l'immagine visualizzata da mobile? Ora è particolarmente grande (occupa tutta l'area orizzontale)
Pensavo di modificare
da
@media (min-width: 544px) {
.picsponsive>figure {
width: calc(100% / 2);
}
.picsponsive>figure>img {
max-height: 500px;
}
}
a
@media (min-width: 544px) {
.picsponsive>figure {
width: calc(80% / 2);
}
.picsponsive>figure>img {
max-height: 500px;
}
}
Quindi cambiando il 100% in 80% ma non mi sembra questo il parametro
Grazie!
Iceberg
Per capire come intervenire ci sarebbe da chiarire meglio qualche punto. Cerco di spiegarti come funziona.Come posso ridurre l'immagine visualizzata da mobile? Ora è particolarmente grande (occupa tutta l'area orizzontale)
Prima cosa, per convenzione ho usato un approccio "mobile-first", questo significa che l'impostazione di default (cioè le regole definite fuori dai vari breakpoint) è quella usata per il mobile; mentre, le regole definite per i breakpoint, stabiliscono la visualizzazione per i vari scaglioni di dimensione della viewport, dalla dimensione più piccola a quella più grande.
Tieni conto che il fattore cascata è peculiare in questo contesto. Le regole definite per prime ricadono poi sui breakpoint a seguire.
Detto questo, se intendi applicare una determinata regola per i dispositivi mobile, dovrai definirla nella parte iniziale come default, per poi sovrascriverla eventualmente a partire da un determinato breakpoint per cui su viewport maggiori avrai una differente impostazione.
Infatti. L'elemento figure è sostanzialmente la "cella" della nostra tabella. Se modifichi la sua dimensione in quel modo è probabile che l'intera struttura si sfasci per le viewport maggiori, o comunque non otterrai l'effetto voluto.Quindi cambiando il 100% in 80% ma non mi sembra questo il parametro
Ho usato calc() per ottenere una suddivisione precisa così da determinare quante "celle" per riga devono esistere per i vari breakpoint.
Il calcolo è quindi basato sul valore totale (100%) della larghezza del contenitore principale, diviso per il numero di celle che si vogliono ottenere per riga.
Ora, se la tua intenzione è quella di ridurre SOLO l'immagine contenuta in figure, dovrai agire sull'elemento img. Trattandosi poi dell'impostazione per mobile, dovrai agire nelle definizioni iniziali di default.
Puoi quindi aggiungere questa definizione come default per il selettore .picsponsive>figure>img:
L'immagine risulterà quindi larga al massimo 80% della larghezza del proprio contenitore (elemento figure).codice:max-width: 80%;
Valuta però che, per i punti visti in precedenza, sarà così per tutte le dimensioni della viewport. Dovrai quindi "rompere" la cascata delle media query definendo, ad esempio, max-width:100% sul secondo o terzo breakpoint in modo che tale regola sia sovrascritta per le dimensioni maggiori del viewport (ottenendo quindi una larghezza massima del 100% per le immagini).
E' chiaro che in questo caso la larghezza è definita solo per l'elemento img, quindi il contenitore figure e il figcaption al suo interno resteranno comunque sempre al 100%.
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Grazie!! Devo leggere passo passo la tua risposta perché è molto complicata per me!!
Grazie infinito per aver dettagliato ogni aspetto nella tua risposta!!
Per quella precedente
.picsponsive>figure>figcaption:border: solid #C0D1CE;
border-width:1px0;
E' OK! Ma io vorrei che sotto ogni caption ci sia uno spazio .... questo per fare in modo che da mobile non sia proprio
Img
text
Img
text
Img
text
ma
Img
text
[spazio]
Img
text
[spazio]
Img
text
[spazio]
in quanto non sarebbe comprensibile la caption a quale immagine fa riferimento se sono tutti gli elementi di seguito
ho provato a fare un
border: solid #C0D1CE;
border-width:1px0;
margin-bottom: 10px;
Ma non gli piace!!
Per quale motivo??
Iceberg
Non ho ben chiara la tua situazione attuale dopo le tue personalizzazioni. Se puoi postare un link della pagina potrebbe essere utile per poterti dare dei consigli più mirati secondo le tue esigenze.
Ad ogni modo, se vuoi aumentare la distanza verticale tra una "cella" e l'altra (cioè tra i contenitori), puoi agire sul margine inferiore di figure:
Quello che invece hai fatto tu (che dovrebbe comunque funzionare) sposta l'elemento figcaption verso l'alto ma all'interno del contenitore stesso. Ora, dovrei aprire una lunga parentesi per spiegarti che in questo caso si potrebbe avere una sovrapposizione tra figcaption e img (in sostanza il testo andrebbe a coprire l'immagine) a meno di modificare altri valori per creare lo spazio opportuno.codice:.picsponsive > figure { /* .... al posto di 0 0 3px metti */ margin: 0 0 13px; }
Però, ripeto, dovresti vedere comunque un qualche risultato, per cui non capisco cosa intendi per "non gli piace!!".
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum