css per versione blog mobile

[luisa227]

Sto cercando di migliorare il mio blog (su piattaforma wordpress) in modo che sia visibile ANCHE con cellulari e i-phone.

Non avendo cellulare e i-phone ho provato a visionare il blog con opzione per cellulari usando http://www.google.it/m/ ma si vede malissimo e ovviamente mi dice "Questa pagina adattata per il tuo browser non è approvata da Google."

Mi hanno consigliato di impostare un css apposito, ma non avendolo mai fatto e non avendolo mai visto non so come dovrebbe essere visionato il blog. Mi aiutate a fare chiarezza? grazie

[luisa227]

Originariamente inviato da luisa227
Sto cercando di migliorare il mio blog (su piattaforma wordpress) in modo che sia visibile ANCHE con cellulari e i-phone.

Non avendo cellulare e i-phone ho provato a visionare il blog con opzione per cellulari usando http://www.google.it/m/ ma si vede malissimo e ovviamente mi dice "Questa pagina adattata per il tuo browser non è approvata da Google."

Mi hanno consigliato di impostare un css apposito, ma non avendolo mai fatto e non avendolo mai visto non so come dovrebbe essere visionato il blog. Mi aiutate a fare chiarezza? grazie

per cortesia, posso avere degli spunti su cui lavorare?

Il mio blog è:tempodiagire.altervista.org

in prima linea: quali elementi devono secondo voi essere visibili? e come?
Il mio scopo è quello di indurre gli utenti ad acquistare i prodotti ( presenti nella sidebar e che compaiono anche nella categoria prodotti consigliati) e iscriversi alla newsletter.

da quello che ho capito (ditemi se sbaglio) va fatta una sola colonna lineare... ma l'altezza e la larghezza?? come la determino?

sto seguendo questa guida: http://perishablepress.com/the-5-min...bile-makeover/

[luisa227]

ora il blog ce l'ho cosi ed è impostato su handheld

http://tempodiagire.altervista.org/?css=mobile

mi interessava capire come lo dovrei visualizzare...
il mio css è questo:

/* mobile styles */
@media handheld {

	html, body {
		font: 12px/15px sans-serif;
		background: #fff;
		padding: 3px;
		color: #000;
		margin: 0;
		}
	#sidebar, #footer {
		display: none;
		}
	h1, h2, h3, h4, h5, h6 {
		font-weight: normal;
		}
	#content img { 
		max-width: 250px;
		}
	.center {
		width: 100% !important;
		text-align: center;
		}
	a:link, a:visited {
		text-decoration: underline;
		color: #0000CC;
		}
	a:hover, a:active {
		text-decoration: underline;
		color: #660066;
		}

}
/* iPhone-specific styles */
@media only screen and (max-device-width: 480px) { 

	html {
		-webkit-text-size-adjust: none;
		}

}

[simo22]

[luisa227]

Originariamente inviato da simo22

wow! lo devo visualizzare cosi???? (o già si vede cosi???) MA COSA SONO QUEi pallini rossi col numero 5??? i commenti?

mmmm... non credo sia possibile con il solo utilizzo di un css ottenere una cosa simile...