Più icone in modalità responsive 
Autor: Fabrizio Ciccarelli
Besucht 442,
Followers 2,
Geteilt 0
Salve a tutti, è vero che i display dei telefono non sono tutti uguali. Il mio ad esempio è dotato di un display da 6,53 pollici con risoluzione Full HD+ (1080×23401080 cross 23401080×2340 pixel) e rapporto d'aspetto 19.5:9.
1080×23401080 cross 23401080×2340Nonostante questo ho questa pagina: Servizi che non riesco proprio a visualizzare con 2 icone una accanto all'altra. Ho provato a modificarne l'aspetto in ogni modo. Sono riuscito addirittura a farle diventare minuscole ma restano sempre singole in colonna.
C'è un modo per riuscire a vederle finalmente a coppia su ogni riga o devo valutare di cambiare telefono per poter vedere come recepiscono la pagina gli utenti con smarphone più moderni?
Gepostet am
Prova ad aggiungere un break point a 320px come ultimo così potrai modificare a tuo piacimento il 480px
Autor
Tu come la visualizzi?
Una sotto laltra
https://www.giancarloweb.it/inputpreview.html?url=https://www.cafonline.it/servizi.php
ciao, ... vedo che hai già impostato 6 schede per riga, pertanto dovrebbe essere sufficiente aggiungere un breakpoint in più a 360px, come avevo già verificato e suggerito qui:
> https://helpcenter.websitex5.com/de/post/274936
... oppure, se preferisci il mio codice EXTRA, molto semplice, otterresti direttamente questo risultato, ...se fai come confermato in quel Topic, non ce ne sarà bisogno, ma nel caso ti interessasse avvisami...
.
Autor
Al momento ho questi breakpoint:
esatto, come suggerito al post sopra, aggiungi un nuovo breakpoint a 320px avrai la cosi la possibilità di gestire quella a 480px in modo da visualizzare due oggetti per colonna....
... per il mio metodo del Topic che ti ho indicato, senza dover ricorrere al mio codice EXTRA, devi provare a fare così:
.
come spiegato al mio post precedente, inserendo un ulteriore breakpoint di risoluzione inferiore, avrai la possibilità di impostare gli oggetti su 2 colonne a livello smartphone (e non soli 1 colonna), come visibile sotto:
del resto, basta provare, ciao
Autor
Ho provato ad inserire un altro breakpoint e sia a 320 come suggerito da Giancarlo e sia a 360, come suggerito da Kolasim il risultato non cambia. In particolare voglio specificare, se può essere utile, che non si tratta di immagini come nell'esempio in foto di Giancarlo, bensi di oggetti in "Cataloghi prodotti".
Cataloghi prodotti?
Direi che il discorso cambia
Fabrizio come da tua immagine,
Se l’ultimo breakpoint è 480px, puoi intervenire solo a 720px e inserire interruzioni di riga ogni 2 immagini.
Non puoi intervenire sull’ultimo breakpoint (480px il programma non lo consente).
Se invece l’ultimo breakpoint è inferiore a 480px, ad esempio 320px, allora al penultimo breakpoint (480px) puoi intervenire e mettere le immagini affiancate.
In questo caso però devi inserire tu manualmente, per inserire le interruzioni di riga: non è automatico.
poi considera che website all'ultimo preakpoint incolonna tutto
Autor
Proviamo con un tuo codice magico?
Risolve a livello di immagine con il codice extra ma poi i testi sotto? Mha.. io ci ho provato e mi esce questo ....
mEntre con una variazione delle icone (ora messe a casacci) probabilme te risultà più ordinato. Da provare.
Fabri se ti interessa o semplicemente vuoi provare dimmelo che ti do il link al progetto diretto con simulazione in tempo reale del responsive.
1) ... le tue schede incolonnate nella risoluzione inferiore stanno abbastanza bene nello smartphone, un visitatore normale lo riterrebbe normale e non ci troverebbe niente di strano;
2) ... penso che si possa sistemare senza codice come per le schede portfolio di questo sito che ti avevo segnalato e che puoi verificare:
> https://ica.web.id/gallery.html
3) ... per risultato come da mio STAMP(!) passiamo ora al mio codice "magico" della serie "l'uovo di Colombo", questo:
<style>
@media (max-width: 480px) {/*K>*/
.im-cc-products-cardlayout {
display: flex !important;flex-wrap:wrap !important}
.im-cc-products-card {
width: 49% !important}/*K<<*/}
</style>
... ovviamente il codice è da inserire al Passo_3 nelle Proprietà della pagina "servizi" | sezione Esperto | Prima della chiusura del tag /HEAD...
.
ciao
.
Dovrebbe venire cosi:
Autor
Come sempre risolutivo. Grazie...
... ho controllato nello smartphone ... OK ...
... grazie anche a te per il riscontro ..
.