[RISOLTO] colonne responsive

[mariarosaria]

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

[tomtomeight]

Le foto mettile in un modulo a destra.

[mariarosaria]

Grazie
Scusa, ma non sono ferrata.
Come faccio a posizionare il modulo a destra e solo a destra del testo dopo il "leggi tutto"?

[tomtomeight]

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.

[marine]

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.

[mariarosaria]

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

[Limma]

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...?

[mariarosaria]

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 

[Limma]

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".

[Limma]

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...).

[mariarosaria]

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

[mariarosaria]

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

[tomtomeight]

S3 hai risolto non dimenticarti di inserire il [RISOLTO]


Considera che per immagini responsive non si inseriscono mai le dimensioni fisse.

[mariarosaria]

 
Hai ragione, stavo per farlo e poi me ne sono dimenticata