Autore Topic: [RISOLTO] colonne responsive  (Letto 759 volte)

Offline mariarosaria

  • Esploratore
  • **
  • Post: 182
  • Sesso: Femmina
  • Comincio a capire...
    • Mostra profilo
[RISOLTO] colonne responsive
« il: 27 Dic 2018, 16:18:18 »
Salve a tutti. Ho creato questo articolo su 3 colonne, o meglio, due colonne di diversa larghezza.Ho creato un div contenitore e due grid per le colonne con UIkiti.
Codice: [Seleziona]
<div class="uk-grid">
<div class="uk-width-2-3">Div doppia colonna contenente il testo<><div class="uk-width-1-3">Div colonna singola contenente le foto<><>
Ovviamente sui cellulari, le colonne risultano molto piccole, quindi vorrei che la prima colonna col testo si allargasse per tutto lo schermo e la colonna di destra contenente le foto andasse a capo occupando anch'essa tutta la larghezza dello schermo.

In base a questa guida ho provato con
Codice: [Seleziona]
<div class="uk-width-2-3 uk-width1-1@s">e
Codice: [Seleziona]
<div class="uk-width-2-3@l uk-width1-1@s">e anche con
Codice: [Seleziona]
<div class="uk-width-2-3 uk-width-expand@s">ma non riesco a venirne a capo.Qualcuno ha qualche suggerimento?
Grazie, come sempre
« Ultima modifica: 02 Gen 2019, 18:28:36 da mariarosaria »

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 30547
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
Re:colonne responsive
« Risposta #1 il: 27 Dic 2018, 19:22:01 »
Le foto mettile in un modulo a destra.
NEWS DataGrill Xataface Installer (Ver. 1.0.1) per Joomla 3.8.x - DEMO Gestione Magazzino

Offline mariarosaria

  • Esploratore
  • **
  • Post: 182
  • Sesso: Femmina
  • Comincio a capire...
    • Mostra profilo
Re:colonne responsive
« Risposta #2 il: 27 Dic 2018, 19:24:56 »
Grazie
Scusa, ma non sono ferrata.
Come faccio a posizionare il modulo a destra e solo a destra del testo dopo il "leggi tutto"?

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 30547
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
Re:colonne responsive
« Risposta #3 il: 27 Dic 2018, 19:40:31 »
Modulo personalizzato in posizione right o equivalente che abbini come visualizzazione alla voce di menù che apre l'articolo. Comunque è una delle possibilità, un altra, forse migliore, è usare bootstrap.
NEWS DataGrill Xataface Installer (Ver. 1.0.1) per Joomla 3.8.x - DEMO Gestione Magazzino

Offline marine

  • Moderator
  • Instancabile
  • *****
  • Post: 5079
  • Sesso: Maschio
    • Mostra profilo
Re:colonne responsive
« Risposta #4 il: 27 Dic 2018, 20:40:19 »
un altra, forse migliore, è usare bootstrap.
Anche io mi sento di consigliarti di usare bootstrap considerando il fatto che è già integrato in joomla di suo, inoltre è continuamente sviluppato ed in giro trovi moltissima documentazione a riguardo.

Offline mariarosaria

  • Esploratore
  • **
  • Post: 182
  • Sesso: Femmina
  • Comincio a capire...
    • Mostra profilo
Re:colonne responsive
« Risposta #5 il: 27 Dic 2018, 21:23:16 »
Infatti non capisco perchè devo usare un modulo quando c'è la soluzione...
In ogni caso il mio template ha un modulo a destra, ma è "esterno" al corpo dell'articolo, non riuscirei a incorporare soltanto la porzione di testo che voglio io con la posizione già esistente e crearne uno nuovo che faccia al caso mio mi sembra una soluzione molto più elaborata rispetto a bootstrap.
Qualche consiglio di guida "immediata"?
Grazie a tutti

Offline Limma

  • Abituale
  • ****
  • Post: 1066
  • Sesso: Maschio
    • Mostra profilo
Re:colonne responsive
« Risposta #6 il: 27 Dic 2018, 21:40:28 »
Ciao mariarosaria  :)
Ma la griglia di 7 immagini che hai nella home page sotto "Conosciamoci meglio" non l'avevi fatta a partire da un codice bootstrap che ti avevo proposto un po' di tempo fa...?

Offline mariarosaria

  • Esploratore
  • **
  • Post: 182
  • Sesso: Femmina
  • Comincio a capire...
    • Mostra profilo
Re:colonne responsive
« Risposta #7 il: 27 Dic 2018, 21:45:32 »
Ciao Limma.Come sempre presentissimo.  :)
Effettivamente ci stavo pensando...
Avevo rimosso. ::)
Comunque cercando ho trovato questa piccola guida che mi sembra ben fatta, con tanto di esempi.
Mai comunque come quelli dell'impareggiabile limma che ce li fa sempre ad hoc  ;)
Domani farò qualche prova.
Gli esempi funzionano sempre, ma poi quando si va ad applicarli c'è sempre qualcosa che non torna  ;D

Offline Limma

  • Abituale
  • ****
  • Post: 1066
  • Sesso: Maschio
    • Mostra profilo
Re:colonne responsive
« Risposta #8 il: 27 Dic 2018, 22:26:48 »
Visto come hai impaginato il tuo articolo (due colonne con rapporto di larghezza 2:1) non devi fare altro che usare questa griglia Bootstrap 3:
Codice: [Seleziona]
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
Dove c'è .col-md-8 ci metti il tuo testo e dove c'è .col-md-4 ci metti la tua galleria fotografica.
Con questo codice sotto i 992px di risoluzione orizzontale il testo occuperà tutta la larghezza disponibile e così faranno le immagine che nel frattempo saranno "scivolate" sotto al testo.
Se il passaggio in colonna così come è impostato dal codice qui sopra ti pare prematuro puoi sostituire "md" con "sm", forzando così l'incolonnamento sotto i 768px.
 :)
P.S. La "guida" che hai linkato non è altro che una traduzione pari pari della documentazione ufficiale di Bootstrap 3 che trovi qui, e qui sulle "griglie".
« Ultima modifica: 27 Dic 2018, 23:18:09 da Limma »

Offline Limma

  • Abituale
  • ****
  • Post: 1066
  • Sesso: Maschio
    • Mostra profilo
Re:colonne responsive
« Risposta #9 il: 27 Dic 2018, 23:22:49 »
Ho fatto una rapida prova col testo e le immagini del tuo articolo (ma senza galleria in overlay, naturalmente...), usando il codice
Codice: [Seleziona]
<div class="row">
  <div class="col-sm-8">TESTO</div>
  <div class="col-sm-4">IMMAGINI</div>
</div>
Il risultato lo puoi vedere qui (sotto c'è una prova di altro layout...).

Offline mariarosaria

  • Esploratore
  • **
  • Post: 182
  • Sesso: Femmina
  • Comincio a capire...
    • Mostra profilo
Re:colonne responsive
« Risposta #10 il: 29 Dic 2018, 17:07:24 »
Anzitutto ringrazio Limma per le sue risposte così esaustive  ;)
Siamo alle solite...
In teoria dovrebbe funzionare... in pratica no  >:(
Posto qui ilcodice preso dall'editor dell'articolo. Ho provato anche con sm e md, ma il risultato è sempre uguale.

Codice: [Seleziona]
<div class="row">
<div class="col-xs-8">
<p style="text-align: justify;">La cappella addobbata a festa si è trasformata in una piccola reggia per accogliere con tutto l’amore e la cura possibile il piccolo Gesù, diventando specchio dei nostri cuori, desiderosi di Lui e pieni di gratitudine. I fiori, le luci, gli arredi sacri: tutto qui alla Cittadella dell'Immacolata canta in questi giorni la gioia per Colui che è nato per noi! È in quest’atmosfera di letizia che si sono svolte con granne solennità le celebrazioni natalizie, che hanno visto una consistente partecipazione dei fedeli.</p>
<p style="text-align: justify;">Il rosario mattutino, accompagnato dalle meditazioni della mistica Maria Valtorta sul mistero del Natale, ha preceduto la prima santa Messa, durante la quale abbiamo ascoltato il Vangelo di Giovanni (1,1-18). Padre Santo, al colmo della commozione, ha esclamato: “O mistero mirabile! O mistero che fa di me, creatura fragile e incline al male, una creatura divina! Un Dio che mi soccorre, che si fa medico e medicina, che mi invita ad affidarmi a Lui perché la mia vita abbia un senso!” Abbiamo compreso, grazie alla spiegazione del padre, che il Natale è innanzitutto mistero di un Dio che si incarna per la nostra salvezza, ma è anche sacramento, ossia segno tangibile della presenza di Dio, che necessita però di essere accolto nella fede e nell’amore, sull’esempio di Giuseppe e Maria, per essere davvero efficace.</p>
<p style="text-align: justify;">Il Natale inoltre rischia oggi di essere banalizzato dal consumismo: ce l’ha ricordato padre Giuseppe Saraceno nell’omelia della solenne concelebrazione pomeridiana. L’affanno per i regali o per il pranzo rischiano di assorbire tutte le nostre energie, facendoci dimenticare il centro della festa: Gesù che nasce per noi! Il significato originario dello scambio dei doni, ad esempio, era quello di ricordarci che Dio stesso si è tutto donato a noi.&nbsp; Contemplare la grotta di Betlemme dovrebbe riportarci anche a considerare la “follia” di un Dio che, da ricco, si fa povero per noi, così come ha fatto san Francesco d’Assisi “inventando” il presepio a Greccio. Questa povertà dovrebbe spingerci a distaccarci da tutto ciò che è superfluo per riscoprire ciò che conta davvero: l’amore per Dio e per il prossimo.</p>
<p style="text-align: justify;">Entrambe le sante Messe si sono concluse con il tradizionale bacio del Bambinello, che non è solo un gesto di devozione, ma espressione della nostra fede e del nostro amore per questo Dio che si fa piccolo per amore nostro. E, come ci ricordano i santi, “l’amor con l’amor si paga!” Viviamo allora intensamente questo tempo di grazia. Accogliamo Gesù con l’umiltà di s. Giuseppe, uomo forte e coraggioso, e con l’amore di Maria, che meditava nel silenzio gli eventi meravigliosi del suo Figlio. Apriamo il cuore a questo mistero e sacramento, e lasciamoci raggiungere dalle braccia amorose di questo Dio che si curva teneramente su di noi per sussurrarci: “Coraggio! Non vivere senza un senso... tu sei fatto per il Cielo!”</p>
</div>
<div class="col-xs-4"><a href="images/quotidiano/natale_2018/natale-2018-cittadella-dell-immacolata_1.jpg" data-lightbox="on, transitionIn:fade; group:natale2018">
<p><img style="margin: 1px auto; display: block;" title="Clicca per vedere la Photogallery" src="images/quotidiano/natale_2018/natale-2018-cittadella-dell-immacolata_1.jpg" alt="natale 2018 cittadella dell immacolata 1" width="500" height="332" /></p>
<p><img style="margin: 1px auto; display: block;" title="Clicca per vedere la Photogallery" src="images/quotidiano/natale_2018/natale-2018-cittadella-dell-immacolata_2.jpg" alt="natale 2018 cittadella dell immacolata 2" width="500" height="332" /></p>
<p><img style="margin: 1px auto; display: block;" title="Clicca per vedere la Photogallery" src="images/quotidiano/natale_2018/natale-2018-cittadella-dell-immacolata_29.jpg" alt="natale 2018 cittadella dell immacolata 29" width="279" height="185" /></p>
<p><img style="margin: 1px auto; display: block;" title="Clicca per vedere la Photogallery" src="images/quotidiano/natale_2018/natale-2018-cittadella-dell-immacolata_13.jpg" alt="natale 2018 cittadella dell immacolata 13" width="500" height="332" /></p>
</a></div>
</div>
Dove sta il problema?
Inoltre i div hanno un margine maggiore rispetto al body dell'articolo (che sarebbe quello prima del "leggi tutto").
Come mai...?
Grazie

Offline mariarosaria

  • Esploratore
  • **
  • Post: 182
  • Sesso: Femmina
  • Comincio a capire...
    • Mostra profilo
Re:colonne responsive
« Risposta #11 il: 31 Dic 2018, 14:27:09 »
Salve a tutti.
Con bootstrap non funziona in nessun modo. Non riesco a capire il perchè.
Alla fine ho risolto con UIkit in questo modo (posto il codice senza contenuti giusto come esempio, qui la pagina):
Codice: [Seleziona]
<div class="uk-grid">
<div class="uk-width-large-2-3 uk-width-medium-1-1">testo</div>
<div class="uk-width-large-1-3 uk-width-medium-1-1">immagini</div>
</div>
Grazie a tutti e spero possa servire a qualcuno.
A presto

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 30547
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
Re:colonne responsive
« Risposta #12 il: 31 Dic 2018, 14:39:45 »
S3 hai risolto non dimenticarti di inserire il [RISOLTO]


Considera che per immagini responsive non si inseriscono mai le dimensioni fisse.
NEWS DataGrill Xataface Installer (Ver. 1.0.1) per Joomla 3.8.x - DEMO Gestione Magazzino

Offline mariarosaria

  • Esploratore
  • **
  • Post: 182
  • Sesso: Femmina
  • Comincio a capire...
    • Mostra profilo
Re:colonne responsive
« Risposta #13 il: 02 Gen 2019, 18:28:20 »
 ;)
Hai ragione, stavo per farlo e poi me ne sono dimenticata

 

Host

Torna su