Autore Topic: [RISOLTO]impostare da css numero colonne layout blog articoli per diversi device  (Letto 1031 volte)

Offline sabina

  • Nuovo arrivato
  • *
  • Post: 6
    • Mostra profilo
Buonasera a tutti,
avrei bisogno dell'aiuto della community per capire come intervenire sul css per forzare la visualizzazione degli articoli (in modalità blog) su una colonna sola per smartphone e tablet/portrait, lasciandola per gli altri device sul numero di colonne impostate nelle opzioni del layout blog.
Ho fatto diversi tentativi ma senza successo. :-\

Il template è realizzato con Artisteer, in allegato posto i principali file css (originali).

Spero di essermi spiegata... e grazie in anticipo per l'aiuto  :)
« Ultima modifica: 15 Mag 2016, 22:57:06 da sabina »

Offline giusebos

  • Fuori controllo
  • *
  • Post: 19557
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
    • Demo iCagenda
devi inserire nel tuo css delle media query, questo un esempio di codice:

Codice: [Seleziona]
@media (min-width: 768px) and (max-width: 1024px) {
div-content {
max-width: xxxpx
}
}

una media query per range monitor
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline sabina

  • Nuovo arrivato
  • *
  • Post: 6
    • Mostra profilo
Grazie giusebos!

Temo però di non essermi spiegata bene: il mio contenuto si dispone correttamente al 100% sui diversi devices tramite media queries.
Quel che non riesco ad ottenere è la forzatura degli articoli (blog su 3 colonne) su una sola colonna per i mobile.

Vorrei cioè che i tre articoli venissero mostrati affiancati sui dispositivi desktop ma uno sotto l'altro sui mobili. Invece adesso anziché incolonnarsi restano sempre affiancati anche sui mobili, col risultato di essere stretti e lunghi (e illeggibili).

Firebug evidenzia:
...
<div class="art-layout-cell art-content"><article class="art-post"><article class="art-post art-messages" style="display: none;"><div class="blog-featured"><div class="items-row cols-3 row-0"><div class="item column-1"><div class="item column-2"><div class="item column-3">
....

Non riesco a capire come intervenire per ottenere cols-1 anziché cols-3 per @media (max-width: 480px). Sempre che sia la strada corretta.

Cosa ne pensi? Ancora grazie...

Offline giusebos

  • Fuori controllo
  • *
  • Post: 19557
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
    • Demo iCagenda
haaaaaa! tu usi quel software innominabile che ti aiuta tanto......a creare problemi.
Purtroppo ti riscrive tutte le classi  e così su 2 piedi non ho idea come intervenire.
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline sabina

  • Nuovo arrivato
  • *
  • Post: 6
    • Mostra profilo
Già...  :(

Intanto sto provando a ricostruire quelle pagine col un Page Builder. Sembrerebbe funzionare. Sperem...

La darei per risolta così
Grazie, alla prossima

 

Torna su