Protostar visualizzazione mobile non si adatta

[ilmagowalter]

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 ?

[maxzilla]

Ciao ilmagoalter
bisognerrebe vedere il sito

intanto potresti togliere

position:absolute;
da .btnreadmore

o sostiturlo con relative anziche' absolute

[ilmagowalter]

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

[ilmagowalter]

ecco il link al sito

http://www.ilbrivido.it

please help

[Fabrizio Fiorita]

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.

[ilmagowalter]

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

[Fabrizio Fiorita]

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.

[ilmagowalter]

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

[maxzilla]

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

[giusebos]

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.

[Fabrizio Fiorita]

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/

[ilmagowalter]

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

[giusebos]

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.

[ilmagowalter]

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

[giusebos]

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

[ilmagowalter]

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

[giusebos]

vedo che hai elaborato cose mai scritte.
Ma hai ragione, facciamo senza polemica che non serve a nessuno.

[ilmagowalter]

Se ho elaborato male io meglio così
 

[tomtomeight]

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.

[ilmagowalter]

È 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