Back to top

Autore Topic: Protostar visualizzazione mobile non si adatta  (Letto 5603 volte)

Offline ilmagowalter

  • Esploratore
  • **
  • Post: 133
    • Mostra profilo
Protostar visualizzazione mobile non si adatta
« il: 25 Mar 2016, 12:19:10 »
ciao
ho una pagina del sito dove gli articoli sono suddivisi in due colonne,
ho fatto override di alcune classi per visualizzare il box contenitore come in immagine1
Codice: [Seleziona]
.span6 {
    background-color: #F4F4F4;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.15);   
    padding:5px;
    margin-bottom: 20px;
    position:relative;
}
.page-header {
    border-bottom: 1px solid #000;
    text-align: center
}
.btnreadmore {
    background:#000000;
    color:#ffffff;
    padding:5px;
    float:right;
    border-radius: 4px;
    position:absolute;
    bottom:0;
    right:0;
    margin:10px;
}
.btnreadmore:hover,.btnreadmore:active, .btnreadmore:visited, .btnreadmore:link {
    color:#ffffff;
    text-decoration:none;
}
l'immagine è presente nel contenuto dell'articolo
quando però visualizzo dallo smartphone, visualizzo come in immagine2
in pratica il contenitore non si adatta...l'immagine va fuori il contenitore e la visualizzazione globale è sballata ( compreso il leggi tutto sopra il testo...
qualcuno riesce a darmi una mano ?

Offline maxzilla

  • Appassionato
  • ***
  • Post: 620
  • Sesso: Maschio
    • Mostra profilo
Re:Protostar visualizzazione mobile non si adatta
« Risposta #1 il: 26 Mar 2016, 10:28:32 »

Ciao ilmagoalter
bisognerrebe vedere il sito

intanto potresti togliere

position:absolute;
da .btnreadmore

o sostiturlo con relative anziche' absolute
Ikonart Informatica - Trento

"Mangia prodotti italiani. W il made in Italy"

Offline ilmagowalter

  • Esploratore
  • **
  • Post: 133
    • Mostra profilo
Re:Protostar visualizzazione mobile non si adatta
« Risposta #2 il: 26 Mar 2016, 10:31:23 »
a breve faccio upload del sito, così posso farlo vedere
ho messo absolute su .btnreadmore ( e relative su span6 ) per avere la possibilità di abbassare il pulsante in basso a dx

Offline ilmagowalter

  • Esploratore
  • **
  • Post: 133
    • Mostra profilo
Re:Protostar visualizzazione mobile non si adatta
« Risposta #3 il: 31 Mar 2016, 23:04:38 »
ecco il link al sito

http://www.ilbrivido.it

please help :)

Offline Fabrizio Fiorita

  • Abituale
  • ****
  • Post: 1315
  • Sesso: Maschio
    • Mostra profilo
Re:Protostar visualizzazione mobile non si adatta
« Risposta #4 il: 31 Mar 2016, 23:18:58 »
Ciao Mago  :)
Fai attenzione:
Se desideri che il tuo sito venga visto da realtà diverse - PC, tablet, smart - devi approntare css differenziati, che possono essere distinti, ad esempio, indicando nei meta tag link le dimensioni degli schermi ai quali il css si deve riferire.
Oltretutto devi individuare, per la visualizzazione su schermi piccoli (smart) quali elementi vuoi siano sicuramente visti e quali invece possano essere omessi.
Tieni anche conto delle caratteristiche di visualizzazione che ogni marca di smart rende disponibili, specie in applicazione dei diversi sistemi operativi.
Cerca su Internet delle pagine che ti diano dei suggerimenti, perché il problema non è dei più semplici, specie se affrontato da un singolo programmatore. Io mi ci sto confrontando da mesi.
Fabrizio
Per programmare servono i tasti e la testa. Peccato che molti usino solo i primi...
Vai a vedere il mio sito: http://www.fabriziofiorita.joomlafree.it/index.php?option=com_content&view=featured&Itemid=101

Offline ilmagowalter

  • Esploratore
  • **
  • Post: 133
    • Mostra profilo
Re:Protostar visualizzazione mobile non si adatta
« Risposta #5 il: 31 Mar 2016, 23:41:30 »
ciao Fabrizio,
il discorso è che protostar dovrebbe essere un template responsive
io nel css non ho modificato la parte @media ( per intenderci )
non riesco a utilizzare firebug o similari nell'iphone
e forse la parte @media va ancora un pò fuori dalle mie conoscenze...per questo sto chiedendo aiuto qui
spero che qualcuno mi dia una mano

Offline Fabrizio Fiorita

  • Abituale
  • ****
  • Post: 1315
  • Sesso: Maschio
    • Mostra profilo
Re:Protostar visualizzazione mobile non si adatta
« Risposta #6 il: 01 Apr 2016, 00:30:58 »
Sul "responsive" avrei molto da obiettare.
Sembra che l'unica soluzione al momento sia proprio quella di prevedere dei css differenziati per dimensione del display.
Ciò naturalmente comporta l'analisi accurata delle diverse dimensioni dei display previste dai diversi smart sul mercato.
Un aiuto potrebbe venire dall'analisi dei css adottati da siti importanti che consentono la visualizzazione sugli smart.
Altro non so consigliarti.
Fabrizio
Per programmare servono i tasti e la testa. Peccato che molti usino solo i primi...
Vai a vedere il mio sito: http://www.fabriziofiorita.joomlafree.it/index.php?option=com_content&view=featured&Itemid=101

Offline ilmagowalter

  • Esploratore
  • **
  • Post: 133
    • Mostra profilo
Re:Protostar visualizzazione mobile non si adatta
« Risposta #7 il: 01 Apr 2016, 09:51:13 »
da quello che ho capito tutto dipende da come è inserita l'immagine nel testo
se la metto allineata a sx, quindi con il testo a dx ( con il float:left oppure con il l'attributo align)left dentro il tag img ) allora l'immagine esce dal contenitore
vedi img1

se invece non metto alcun allineamento, quindi il testo va per lo più di sotto, il contenitore si allunga ed include l'immagine
vedi img1 e img2

brancolo nel buio...

se impostassi una altezza fissa ( ad esempio height:300px; ) diciamo che potrei risolvere, ma non mi sembra una buona soluzione, anche perchè dovrei farlo su diverse risoluzioni...secondo me l'altezza deve derivare dal contenuto stesso...non capisco proprio
« Ultima modifica: 01 Apr 2016, 09:55:15 da ilmagowalter »

Offline maxzilla

  • Appassionato
  • ***
  • Post: 620
  • Sesso: Maschio
    • Mostra profilo
Re:Protostar visualizzazione mobile non si adatta
« Risposta #8 il: 01 Apr 2016, 11:04:48 »
Hai gia provato a mettere copertina, testo a destra  della copertina e bottone in un DIV togliendo paragrafi e span che non servono?
nello stile del div poi si possono definire display:.., width:..., ecc
Ikonart Informatica - Trento

"Mangia prodotti italiani. W il made in Italy"

Offline giusebos

  • Fuori controllo
  • *
  • Post: 21748
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
Re:Protostar visualizzazione mobile non si adatta
« Risposta #9 il: 01 Apr 2016, 11:12:45 »
scusa ma protostar centra poco, sei tu che non hai usato le giuste dichiarazioni css e anche la giusta struttura dei div.
Usa le classi di bootstrap e magari guarda gli esempi della documentazione.
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline Fabrizio Fiorita

  • Abituale
  • ****
  • Post: 1315
  • Sesso: Maschio
    • Mostra profilo
Re:Protostar visualizzazione mobile non si adatta
« Risposta #10 il: 01 Apr 2016, 11:18:33 »
Senti, prima di fare tentativi a vuoto senza una base tecnica di riscontro, vai a vedere questo sito.
http://www.html.it/guide/responsive-web-design-la-guida/
Fabrizio
Per programmare servono i tasti e la testa. Peccato che molti usino solo i primi...
Vai a vedere il mio sito: http://www.fabriziofiorita.joomlafree.it/index.php?option=com_content&view=featured&Itemid=101

Offline ilmagowalter

  • Esploratore
  • **
  • Post: 133
    • Mostra profilo
Re:Protostar visualizzazione mobile non si adatta
« Risposta #11 il: 01 Apr 2016, 11:36:04 »
si è vero non sono molto prepararto con i css, però scusate
io mi sono limitato a ridefinire le classi .span6, .page-header e .btnreadmore per questione di colori e bordo

se rimuovo le miei ridefinizioni questo è quello che vedo ( vedi allegati )

anche in questo caso il secondo titolo non risulta sotto la prima immagine

Offline giusebos

  • Fuori controllo
  • *
  • Post: 21748
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
Re:Protostar visualizzazione mobile non si adatta
« Risposta #12 il: 01 Apr 2016, 11:45:38 »
siamo d'accordo, ridefinire un colore è una cosa, ridefinire un comportamento e altro, ma se non ti documenti un poco, equivale a comprare un biglietto della pesca di beneficenza, se hai fortuna prendi un bel regalo, altrimenti il solito portachiavi di plastica.

Pure io che il webmaster lo faccio di mestiere, spesso devo andarmi a rileggere un pò di documentazione, non posso ricordarmi tutto e non so tutto, ma non mi metto li ed improvviso cose che poi non danno i risultati sperati.
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline ilmagowalter

  • Esploratore
  • **
  • Post: 133
    • Mostra profilo
Re:Protostar visualizzazione mobile non si adatta
« Risposta #13 il: 01 Apr 2016, 13:26:37 »
Certo che mentre parlo con voi cerco documentazione...leggo forum...e cerco di capire
ma ancora non ho trovato quello che mi serve
Però non posso anche imparare tutta la gestione del codice di joomla e i css in così poco tempo
di solito ci metto poco ad imparare ( vista la pregressa esperienza di analista/programmatore in altre piattaforme )
ma certe volte basta un cenno da qualcuno di voi che vede il sito con firebug e il problema lo si fixa facilmente ... Anche a questo servono i forum..
Ovviamente se non troverò aiuto qui continuerò a studiarci fino a quando non risolvo

Offline giusebos

  • Fuori controllo
  • *
  • Post: 21748
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
Re:Protostar visualizzazione mobile non si adatta
« Risposta #14 il: 01 Apr 2016, 13:36:50 »
non lo fare il ragionamento "che tanto c'è il forum" che non funziona così.

Il tuo errore principalmente sta in come hai confezionato il codice che dovrebbe restituirti un contenitore che contiene immagine e descrizione e che abbia un determinato comportamento in base alle dimensioni del monitor.

Se ti devo aiutare lo faccio bene, ma per il tuo caso devo andarmi a vedere la documentazione di bootstrap e non ho tempo adesso.

Puoi farlo tu e non c'è bisogno di imparare " tutta la gestione del codice di joomla"

Oppure attendere qualcuno che sia meno impegnato che ti guidi passo passo.

qui quello che ti serve

il sistema a griglia: getbootstrap.com/css/#grid
le immagini: getbootstrap.com/css/#images

su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline ilmagowalter

  • Esploratore
  • **
  • Post: 133
    • Mostra profilo
Re:Protostar visualizzazione mobile non si adatta
« Risposta #15 il: 01 Apr 2016, 13:50:38 »
Non capisco bene perché hai questo atteggiamento supponente...
supponendo il fatto che aspetto la pappa pronta...
Non è questo il senso del post...
La cosa è semplice dal mio punto di vista
se qualcuno sa come aiutarmi impegnandosi in base alla voglia/tempo che ha lo scrive altrimenti io continuerò a studiare finché non trovo la soluzione
è una questione di tempi non di "non studio tanto c'è il forum"
giusto per chiarire
Senza polemica

Offline giusebos

  • Fuori controllo
  • *
  • Post: 21748
  • Sesso: Maschio
  • Giuseppe Serbelloni Mazzanti Viendalmare
    • Mostra profilo
Re:Protostar visualizzazione mobile non si adatta
« Risposta #16 il: 01 Apr 2016, 17:34:29 »
vedo che hai elaborato cose mai scritte.
Ma hai ragione, facciamo senza polemica che non serve a nessuno.
su www.icagenda.it guide e tutorial con esempi di chronoforms e chronoconnectivity

Offline ilmagowalter

  • Esploratore
  • **
  • Post: 133
    • Mostra profilo
Re:Protostar visualizzazione mobile non si adatta
« Risposta #17 il: 01 Apr 2016, 18:35:33 »
Se ho elaborato male io meglio così
 :) ;)

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 32046
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
Re:Protostar visualizzazione mobile non si adatta
« Risposta #18 il: 01 Apr 2016, 19:58:03 »
I tempi cambiano e deve cambiare il modo di concepire i siti, non è più possibile partire e basare il layout classico per deshtop e poi adattarne la visualizzazione sugli smart, andava bene fino ad ieri. Oggi forse si dovrebbe invertire il concetto e trovare equilibrio fra responsive ed adaptive, non so consigliarti perché come diceva fabrizio non è semplice ed bisogna documentarsi per bene, studiare, provare e ristudiare. Io ci stò provando per migliorare i miei siti e prendo spunto pure dalle discussioni nel forum oltre che leggermi una marea di articoli in merito che ormai ne è piena la rete. Il succo è che forse è dispersivo focalizzare e trovare soluzione per il singolo problema piuttosto che rivedere il tutto alla luce delle nuove tendenze.

Offline ilmagowalter

  • Esploratore
  • **
  • Post: 133
    • Mostra profilo
Re:Protostar visualizzazione mobile non si adatta
« Risposta #19 il: 01 Apr 2016, 20:07:24 »
È anche vero però che il riuso del codice ormai è fondamentale per gli sviluppatori
E penso che in qualche modo joomla ne sia la prova
Nel senso che in molti preferiscono utilizzare e modificare qualcosa di pre-esistente piuttosto che partire da zero e fare le cose sin da subito adattar a tutti i dispositivi...poi è ovvio dipende da cosa si sta facendo...e per quale cliente ... E quanti soldi ci sono in mezzo
Nel mio caso dato che sto facendo un paio di siti giusto per diletto ma anche per guadagnarci qualcosa se vanno...preferisco utilizzare quello che già esiste ( joomla ) e adattarlo alle mie esigenze limitandomi però anche alle mie competenze in ambito web che sono limitate... ( ho sempre fatto lo sviluppatore in altri ambienti e qualche anno fa ) e cercando sui forum, chiedendo...e spesso non si ha il tempo di studiare tutto e si mette una pezza qua e là
Comunque io continuerò a cercare la soluzione .. Se qualcuno avesse tempo e voglia di aiutarmi sarà ben accetto
Buon weekend

Offline ilmagowalter

  • Esploratore
  • **
  • Post: 133
    • Mostra profilo
Re:Protostar visualizzazione mobile non si adatta
« Risposta #20 il: 01 Apr 2016, 20:10:25 »
Tornando in topic ho scelto di usare protostar in quanto convinto che funzionasse perfettamente con tutti i dispositivi
Ma come visto togliendo le mie modifiche il problema si pone uguale

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 32046
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
Re:Protostar visualizzazione mobile non si adatta
« Risposta #21 il: 01 Apr 2016, 20:19:43 »
Non c'entra il riuso del codice e nemmeno partire da zero e certamente che devi utilizzare quello che ti passa il convento, joomla, estensioni, template, quello che cambia è il modo di assemblare il tutto.
Se parto disponendo la visualizzazione del mio sito per uno smart, sarò concentrato sulla resa per questi e metterò le cose essenziali, poi , credo, mi sara più facile ed agevole in secondo momento ampliare e adattarlo per desktop ed altri dispositivi ed aggiungere contenuti di completamento.
Tanto ormai saranno sempre di più visitatori che approciano ricerche da smart, poi se interessati passano a tab o pc per approfondire quello che hanno trovato interessante. Un altra tendenza che sta prendendo piede è quella di sfruttare le app di base dei dispositivi, esempio se devo inserire una mappa sfrutto quella presente nel dispisitivo stesso e così per tante altre necessità.

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 32046
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
Re:Protostar visualizzazione mobile non si adatta
« Risposta #22 il: 01 Apr 2016, 20:20:37 »
Forse e meglio se scegli un framework base e sviluppi da lì.

Offline ilmagowalter

  • Esploratore
  • **
  • Post: 133
    • Mostra profilo
Re:Protostar visualizzazione mobile non si adatta
« Risposta #23 il: 01 Apr 2016, 21:21:33 »
Be ragazzi al momento il sito fa quello che mi serve ad eccezione di questa cosa
non mi posso mettere a ricominciare :)
Oggi non ho potuto lavorarci, mi ci dedicherò nel weekend se posso
dovrei studiare come impostare un framework ecc e fare un po' uno studio più approfondito che non è la mia esigenza attuale
Se supero questo ostacolo, aggiungo il forum e sono quasi pronto... ( anche se ho il tarlo del blocco preventivo dei cookie e policy ecc ma questo è proprio off topic )

Offline Fabrizio Fiorita

  • Abituale
  • ****
  • Post: 1315
  • Sesso: Maschio
    • Mostra profilo
Re:Protostar visualizzazione mobile non si adatta
« Risposta #24 il: 01 Apr 2016, 23:33:08 »
Ciao.
E' vero che le linee guida dicono di orientarsi prima al responsive sulle piattaforme smart, però non credo che sia corretto buttare tutto alle ortiche e ricominciare da capo.
Questo magari può valere per un sito nuovo, ma per quelli che hanno alle spalle anni di esistenza e GB di consistenza non mi sembra né corretto né utile.
Credo che la soluzioe stia nel formulare nuovi files css destinati ai "piccoli schermi", ma partendo dai css originali.
Necessario rinunciare a qualche elemento che non sia essenziale, concentrandosi sui messaggi fondamentali che si vogliono trasmettere. Tutto sullo smart non ci sta, limitiamo le esigenze estetiche a favore delle esigenze di comunicazione.
Fabrizio
Per programmare servono i tasti e la testa. Peccato che molti usino solo i primi...
Vai a vedere il mio sito: http://www.fabriziofiorita.joomlafree.it/index.php?option=com_content&view=featured&Itemid=101

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 32046
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
Re:Protostar visualizzazione mobile non si adatta
« Risposta #25 il: 02 Apr 2016, 07:53:20 »
Sì io parlavo per i nuovi siti e di occasioni di restyling per gli altri, però non è chiaro il tuo suggerimento circa l'aggiunta di file css dedicati, il css viene letto a prescindere dal dispositivo.

Offline maxzilla

  • Appassionato
  • ***
  • Post: 620
  • Sesso: Maschio
    • Mostra profilo
Re:Protostar visualizzazione mobile non si adatta
« Risposta #26 il: 02 Apr 2016, 11:06:20 »
Premesso che non capisco perche' nel codice ci siano diversi P, DIV e SPAN per gestire poche informazioni,

provando con firebug a eliminare float:none dalla riga 4790 del template.css, si riadatta lo spazio automaticamente.

pero' e' tutto da verificare, perche' quella linea si riferisce proprio alla definizione degli SPAN
Ikonart Informatica - Trento

"Mangia prodotti italiani. W il made in Italy"

Offline Fabrizio Fiorita

  • Abituale
  • ****
  • Post: 1315
  • Sesso: Maschio
    • Mostra profilo
Re:Protostar visualizzazione mobile non si adatta
« Risposta #27 il: 02 Apr 2016, 11:21:18 »
Ciao Tomtom
Nelle istruzioni link dello header di una pagina html c'è l'opzione "media".
Quando html legge lo header va a catturare solo il (o i) css in cui riconosce la propria piattaforma nell'opzione "media" del link.
Ora, fra gli attributi assegnabili a "media", c'è la possibilità di indicare persino le dimensioni massime e minime dello schermo al quale il css è dedicato, oltre a tanti altri particolari.
Vai a vedere
http://www.w3schools.com/tags/att_link_media.asp
Fabrizio
Per programmare servono i tasti e la testa. Peccato che molti usino solo i primi...
Vai a vedere il mio sito: http://www.fabriziofiorita.joomlafree.it/index.php?option=com_content&view=featured&Itemid=101

Offline ilmagowalter

  • Esploratore
  • **
  • Post: 133
    • Mostra profilo
Re:Protostar visualizzazione mobile non si adatta
« Risposta #28 il: 02 Apr 2016, 13:09:23 »
grande maxzilla! Funziona... Grazie!
ho ridefinito la classe nel mio personal.css

tutti qui p, span ecc...non li ho messi io, ma sono stati inseriti nell'articolo in seguito alla formattazione del testo, infatti se vedo il codice html dell'articolo dall'editor vedo

Codice: [Seleziona]
<hr title="Recensione" class="system-pagebreak" />
<p><img style="float: left;" src="images/Profondorosso.jpg" alt="" height="170" /></p>
<p><strong><span style="font-size: 8pt;"><em>Regista: Dario Argento<br /></em></span></strong><span style="font-size: 8pt;"><em><strong>Durata: 127 minuti<br />Anno di uscita: 1975</strong></em></span></p>
<hr id="system-readmore" />

Offline tomtomeight

  • Global Moderator
  • Fuori controllo
  • ********
  • Post: 32046
  • Sesso: Maschio
  • Gli automatismi aiutano ma non insegnano nulla.
    • Mostra profilo
Re:Protostar visualizzazione mobile non si adatta
« Risposta #29 il: 02 Apr 2016, 14:27:01 »
Ciao Fabrizio

Mancava nel tuo suggerimento la definizione da aggiungere nell'index. Leggendo solo di css da aggiungere non rendeva il concetto.

 



Web Design Bolzano Kreatif