[RISOLTO] Template responsive . Problemi visualizzazione su smartphone.

[Mockob75]

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.

[Mockob75]

Nessuna possibile soluzione al problema?... Qualcosa da provare? Grazie....

[Mockob75]

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.

[maicolstaip]

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!

[Mockob75]

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.

[Mockob75]

La soluzione del 60% dei problemi é un ottimo inizio..... Ma il 100% sarebbe un ottimo finale ... Un altro piccolo (grande) aiutino?

[nicolacomin]

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.

[Mockob75]

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.

[nicolacomin]

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.

[Mockob75]

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?

 

[Privilege]

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

[nicolacomin]

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)

[nicolacomin]

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

[Privilege]

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

[maicolstaip]

Ciao Privilege,
meglio se apri un tuo post.

Ciao!

[Mockob75]

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!!