Modifica template Protostar

[tani.com]

Ciao a tutti,
ho provato ad aggiungere delle posizioni nel template Protostar di Joomla e l'ho fatto seguendo le indicazioni sul libro '****i con Joomla!' e le seguenti aggiunte nell'articolo a questo link: *****
Il risultato lo si può vedere nel mio sito http://www.andreatani.it dove nella parte bassa di vedono due nuove posizioni, ma vorrei che queste posizioni, in caso di visualizzazione su dispositivi mobili o con piccoli schermi non si riducano sulla stessa linea dimezzandosi lo spazio disponibile, ma avrei il piacere che si posizionassero in maniera sovrapposta.
Ho cercato in internet, ma non trovo nessuna indicazione, potreste aiutarmi?
Ringrazio anticipatamente e saluto.

edit: rimosso citazione e link a risorse esterne, pratica non garadita in questo forum.

[adottauncane]

Ciao tani.com
cerca nel file template.css i media e aggiungi la nuova regola nella misura che ti serve tipo:

Codice: [Seleziona]

@media (max-width: 480px) {
#MezzoPiedeSinistro {
  width: 100%;
}
#MezzoPiedeDestro {
  width:100%
}
}
Meglio ancora se aggiungi a Protostar un file personal.css per fare queste modifiche in modo che se aggiorni non te le sovrascriva.

[tani.com]

Ciao adottauncane e ti ringrazio per la risposta.
Ho fatto come mi hai consigliato, se ho capito bene.
Nella cartella /templates/protostar/css ho creato un file che ho chiamato personal.css ed al suo interno ho inserito il codice da te consigliatomi, ma non ho visto nessun cambiamento nella visualizzazione delle due posizioni.
Nel frattempo la modifica apportato l'ho lasciata on line, ma se visualizzi la pagina ti accorgerai che la visualizzazione delle due posizioni è ancora orizzontale e non si sovrappone.
Sbaglio qualche cosa?

[adottauncane]

Il file personal.css lo devi però richiamare dal file index.php del template, altrimenti non funziona.
http://www.joomla.it/articoli-community-3x-tab/7374-mini-guida-alla-personalizzazione-del-template-protostar.html#Personalizzare_il_css
Quindi se vuoi provalo sul template.css
cerca nel file template.css i media e aggiungi la nuova regola nella misura che ti serve
la modifica la vedrai comunque riducendo a meno di 480px lo schermo.Quindi se ti servissero uno sopra e l'altro sotto anche ad una misura maggiore devi aumentare i px nei media.Se guardi il file template.css trovi le variazioni a secondo delle misura. Ci sono già. Basta anche aggiungere il codice dove ti serve.

[ciroslitz]

Tani scusa intrusione potresti indicare il codice che hai usato per affiancare i due moduli nella stessa position?

[tani.com]

Scusa ciroslitz, ma rivedendo le vecchie mail ho visto che mi era sfuggita la tua domanda.
Purtroppo ho abbandonato il 'progetto' e non so più dove ho messo i miei vecchi appunti.
Scusa ma non posso più aiutarti, l'unica cosa che ricordo è che ero partito da questa pagina ***
Ciao

edit by mod. Rimosso link a risorse esterne, praticaanon gradita.