Autore Topic: [RISOLTO] Template responsive . Problemi visualizzazione su smartphone.  (Letto 3525 volte)

Offline Mockob75

  • Nuovo arrivato
  • *
  • Post: 18
  • Sesso: Maschio
    • Mostra profilo
Ciao. Premetto che sono in fase di apprendimento. Ho un problema con il sito che sto provando a realizzare. Il template che ho scelto (AS 002077) è responsive ma i moduli nelle posizioni centrali (as-breadcrumbs, as-left-top, as-left-botto, as-content-top...) non riesco a visualizzarli in modo adeguato su smartphone. Le slideshows ed i testi sono in disordine. Bene invece su tablet e pc. Il menù ed il footer vengono sempre visualizzati perfettamente. Ho provato con Mobile Joomla ma.... forse sbaglio ad impostare i vari parametri del modulo.
Il link al sito è http://www.giulivoabbigliamento.joomlahost.it.
Potete darmi qualche prezioso consiglio? Grazie in anticipo.
Saluti.
« Ultima modifica: 12 Set 2015, 10:03:23 da Mockob75 »

Offline Mockob75

  • Nuovo arrivato
  • *
  • Post: 18
  • Sesso: Maschio
    • Mostra profilo
Re:Template responsive . Problemi visualizzazione su smartphone.
« Risposta #1 il: 24 Ago 2015, 11:23:06 »
Nessuna possibile soluzione al problema?... Qualcosa da provare? Grazie....

Offline Mockob75

  • Nuovo arrivato
  • *
  • Post: 18
  • Sesso: Maschio
    • Mostra profilo
Template responsive . Problemi visualizzazione su smartphone.
« Risposta #2 il: 04 Set 2015, 23:12:59 »
Ho fatto l'upgrade del sito a dominio II livello: www.giulivoabbigliamento.it
Il template è AS 002077 FREE.
Dopo diversi tentativi continuo ad avere problemi di visualizzazione sui moduli visualizzati nelle posizioni as-breadcrumbs, as-left-bottom, as-content-top,       as-left-top, as-content-bottom, as-right-top, as-right-bottom. Il logo, il menù ed i moduli nel footer sono visualizzati regolarmente.
In allegato una screen-shot del problema.
Nessuno è in grado di darmi un suggerimento per una modifica al css, un consiglio per una prova...??
Aspetto speranzoso... grazie.

Offline maicolstaip

  • Global Moderator
  • Instancabile
  • ********
  • Post: 17623
  • Sesso: Maschio
    • Mostra profilo
Re:Template responsive . Problemi visualizzazione su smartphone.
« Risposta #3 il: 05 Set 2015, 11:45:52 »
Ciao,
così a naso hai un padding-left ed un padding-right che sballano la visualizzazione con lo smartphone

/templates/as002077free/css/bootstrap.css
intorno alla linea 695
Codice: [Seleziona]
.container-fluid {   
    padding-left: 120px;
    padding-right: 120px;   
}

Magari prova a cambiare i valori con una percentuale, tipo
Codice: [Seleziona]
padding-left: 10%;
padding-right: 10%;

Ciao!
Non si risponde a PM tecnici. Postate sul forum. Grazie.

Offline Mockob75

  • Nuovo arrivato
  • *
  • Post: 18
  • Sesso: Maschio
    • Mostra profilo
Re:Template responsive . Problemi visualizzazione su smartphone.
« Risposta #4 il: 06 Set 2015, 00:04:00 »
Eccellente!! Semplice.... eppure nn ci arrivavo... Un buon 60% dei miei problemi sono risolti! Grazie Maicolstaip!
Ora nella pagina dei contatti http://giulivoabbigliamento.it/index.php/contatti nelle posizioni as-left-bottom e as-right-top stesso problema. Modificare il padding-left e padding-right del container-fluid non sistema le cose.
Così come nella pagina http://giulivoabbigliamento.it/index.php/abbigliamento-uomo per i moduli nelle posizioni as-right-top e as-right-bottom.
Che ne dici? Finiamo l'opera? ;)
Aspetto una nuova risposta ma comunque... Grazie!!!
Allego 2 screen shot.

Offline Mockob75

  • Nuovo arrivato
  • *
  • Post: 18
  • Sesso: Maschio
    • Mostra profilo
Re:Template responsive . Problemi visualizzazione su smartphone.
« Risposta #5 il: 09 Set 2015, 12:14:18 »
La soluzione del 60% dei problemi é un ottimo inizio..... Ma il 100% sarebbe un ottimo finale ;D... Un altro piccolo (grande) aiutino?

Offline nicolacomin

  • Nuovo arrivato
  • *
  • Post: 42
    • Mostra profilo
Re:Template responsive . Problemi visualizzazione su smartphone.
« Risposta #6 il: 09 Set 2015, 12:51:42 »
Ciao. Per contatti intanto nel breackpoint per gli smartphone io scriverei:
#aside-right{
width 100%;
}
questo dovrebbe farti andare a capo il modulo e rendertelo leggibile.

Offline Mockob75

  • Nuovo arrivato
  • *
  • Post: 18
  • Sesso: Maschio
    • Mostra profilo
Re:Template responsive . Problemi visualizzazione su smartphone.
« Risposta #7 il: 10 Set 2015, 01:22:57 »
Ciao! Interessante. Però pare non fungere. Comunque ho il dubbio che sbaglio il punto dove inserisco il codice....
Ho provato nel template.default.css, nel bootstrap.css e nel bootstrap.responsive.css nei vari @media screen (max-width:480 px)... Sarebbe possibile spiegarmi dove inserire il codice che mi hai indicato?
Tra l'altro il meccanismo dei breakpoints è interessante (per un principiante come me) ed aiuta a capire meglio il meccanismo delll'adattività di un sito agli smartphone. Grazie. Aspetto una tua gentile risposta. ;) A presto.

Offline nicolacomin

  • Nuovo arrivato
  • *
  • Post: 42
    • Mostra profilo
Re:Template responsive . Problemi visualizzazione su smartphone.
« Risposta #8 il: 10 Set 2015, 10:08:09 »
Ciao. Allora aggiungi questo codice:

   .row-fluid .itemSpan6, .row-fluid .span6{
      width: 100%;
   }
nel file tmpl.default.css all'interno del breakpoint @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) che è quello mobile. Ti farà andare a capo il modulo contatti solo per le versioni mobile. Il mio consiglio se sei alle prime armi con i template di joomla è di utilizzare uno strumento per analizzare le pagine web (tipo firebug per firefox oppure cliccando f12 su qualsiasi browser). Un'altra cosa che è giusto tu sappia sul tuo template è che è sviluppato sul framework bootstrap e quindi fossi in te mi darei una studiatina anche a quello se hai la necessità di metterci le mani.

Offline Mockob75

  • Nuovo arrivato
  • *
  • Post: 18
  • Sesso: Maschio
    • Mostra profilo
Re:Template responsive . Problemi visualizzazione su smartphone.
« Risposta #9 il: 10 Set 2015, 16:18:58 »
Ciao. Grazie per la veloce risposta e per i consigli. Certo. Firebug è uno strumento che sto già imparando a conoscere ed in effetti gran parte delle modifiche al template sono riuscito a farle grazie a esso.
Per quanto riguarda il mio problema ai moduli  nelle posizioni as-left-bottom, as-right-top, as-right-top e as-right-bottom.... ho aggiunto il tuo codice nel breakpoint che mi hai indicato, senza effetto. Forse sbaglio ma....
Aggiunto nel file template.default.css alla riga 7867... ed è ancora lì.
Mi documenterò sul bootstrap.... nel frattempo.... nn sò... che ne pensi?

 ;) ;) ;)

Offline Privilege

  • Esploratore
  • **
  • Post: 128
    • Mostra profilo
Re:Template responsive . Problemi visualizzazione su smartphone.
« Risposta #10 il: 10 Set 2015, 16:39:21 »
Ho lo stesso problema anche io per il sito www.domiciliatari.com
Devo aprire una nuova discussione o posso essere aiutato anche qui?
Ho provato a cercare la riga container-fluid in css template per cambiare padding left e right ma senza successo.
Grazie

Offline nicolacomin

  • Nuovo arrivato
  • *
  • Post: 42
    • Mostra profilo
Re:Template responsive . Problemi visualizzazione su smartphone.
« Risposta #11 il: 10 Set 2015, 16:52:18 »
Ok dovrei avere capito perché non te lo prende. Infatti la media query è scritta per la posizione landascape dei cellulari (quando lo tieni in orizzontale) infatti va bene per schermi più corti di 800px e meno alti di 300. Le soluzioni sono due:
1) o togli dalla media query questo pezzo "and (orientation: landscape), screen and (max-height: 300px) "
2) oppure aggiungi un breakpoint con la tua regola a quel css così:

@media screen and (max-width: 800px)
{
.row-fluid .itemSpan6, .row-fluid .span6{
      width: 100%;
}
}


Appena sopra quello così se devi modificarlo lo trovi. Così sai che dentro questa media query puoi fare tutte le modifiche relative alla visualizzazione tablet verticale/mobile. In linea di massima comunque ti consiglierei di provare prima la 2)

Offline nicolacomin

  • Nuovo arrivato
  • *
  • Post: 42
    • Mostra profilo
Re:Template responsive . Problemi visualizzazione su smartphone.
« Risposta #12 il: 10 Set 2015, 16:57:25 »
Quale sarebbe "lo stesso problema"? Il tuo sito ha un'altro template. Trovi le stesse classi di quello di Mockob75 perché tutti e due probabilmente utilizzano bootstrap come framework (ma tenete conto che bootstrap è integrato in Joomla3 quindi oramai tutti i template vanno in quella direzione).

Offline Privilege

  • Esploratore
  • **
  • Post: 128
    • Mostra profilo
Re:Template responsive . Problemi visualizzazione su smartphone.
« Risposta #13 il: 10 Set 2015, 17:05:10 »
Nicolacomin lo so che il mio è un altro template, ma anch'esso responsive che mi crea i medesimi problemi descritti nel post (cioè sugli smartphone taglia la pagina, disordina i menù etc).

Forse è meglio se apro un altro post?

Altrimenti qua ci confondiamo con le risposte  ??? ...

Offline maicolstaip

  • Global Moderator
  • Instancabile
  • ********
  • Post: 17623
  • Sesso: Maschio
    • Mostra profilo
Re:Template responsive . Problemi visualizzazione su smartphone.
« Risposta #14 il: 10 Set 2015, 17:07:57 »
Ciao Privilege,
meglio se apri un tuo post.

Ciao!
Non si risponde a PM tecnici. Postate sul forum. Grazie.

Offline Mockob75

  • Nuovo arrivato
  • *
  • Post: 18
  • Sesso: Maschio
    • Mostra profilo
Nicolacomin.... che dire.... chapeau!! Grazie per la soluzione e per i consigli.
Dove posso trovare qualche guida/tutorial sul bootstrap? Ne so poco ma ho voglia di imparare.
Grazie anche a Maicolstaip!
Ci mettiamo un bel... RISOLTO!!!
Thks!! :) :)

 

Host

Torna su