(RISOLTO): Info tema protostar + jea

[gajoomla]

Ciao a tutti ragazzi, sto provando a realizzare un sito web per un amico che ha un agenzia immobiliare e ho scelto di utilizzare il template protostar con il componente jea. Sembra funzionare tutto discretamente ma ho un problema con la visualizzazione in modalità responsive da smartphone o tablet. In poche parole se raggiungete da smartphone http://gibber.altervista.org/index.php/vendita/1-villa-con-piscina l'indirizzo e la mappa sbordano dal template mentre tutto il resto rimane all'interno. Sapreste indicarmi come poter dire al componente di non uscire dal bordo? Grazie mille ragazzi e complimenti per la professionalità del forum.

[adottauncane]

Ciao gajoomla,
benvenuto nel forum

Hai lo stesso problema sulla mappa di Google...

aggiungi questo al file personal.css

Codice: [Seleziona]

.google-maps {
    min-height: 300px;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
}
.google-maps iframe {
    height: 100% !important;
    left: 0;
    position: absolute;
    top: 0;
    width: 100% !important;
}
e comprendi il codice di Google maps tra questo div nel modulo HTML personalizzato della mappa.

<div class="google-maps">
    codice googlemaps
</div>

Per l'indirizzo del componebte correggi così:

Codice: [Seleziona]

.jea-col-right {    border-left-color-ltr-source: physical;    border-left-color-rtl-source: physical;    border-left-color-value: #b2b4bf;    border-left-style-ltr-source: physical;    border-left-style-rtl-source: physical;    border-left-style-value: dashed;    border-left-width-ltr-source: physical;    border-left-width-rtl-source: physical;    border-left-width-value: 1px;    float: right;    margin-left: 2em;    padding-left: 2em;    width: 100%;}
/media/com_jea/css/jea.css riga 202

e idem sulla foto grande:

Codice: [Seleziona]

#jea-gallery-preview.vertical img{
    height: 100% !important;
    width: 100% !important;
}
da aggiungere al file personal.css

Controlla su diversi browser.

[gajoomla]

Grazie mille mi sei stato davvero di grande aiuto sono riuscito a risolvere tutto. Complimenti...

[tia89p]

Ciao io ho lo stesso problema però con la galleria del Jea! Se apro la galleria(che sembra sia con squeezebox) su smartphone le foto vengono deformate .
per vedere il sito è :www.zetaci.com

[adottauncane]

Ciao tia89p,
apri un nuovo post, meglio, qui lo vediamo solo noi che abbiamo scritto e visto che è risolto non interverrà nessuno.
Magari di' quali sono le immagini deformate...

[tia89p]

Ciao! L' ho gia aperto qualche giorno fa, ma non ho avuto un grande aiuto! Per le immagini deformate basta che apri il sito da smartphone e apri una proprietà con jea! Se clicchi su una foto per aprire la galleria vedi il problemone!

[adottauncane]

Mi dai un link diretto alla pagina problematica? Con lo smartphone tanto non saprei come fare ad aiutarti... E poi non ce l'ho. Sono vecchia.

[tia89p]

http://www.zetaci.com/index.php?option=com_jea&view=property&id=32:villetta-al-rustico-avanzato&Itemid=127&lang=it

Basta che clicchi su una foto e ti si apre la galleria di squeezebox! Sulbpc si vedono tutte perfettamente ma su dispositivi come smartphone e tablet si deforma! Non è responsive, lo vedi anche se metti il browser a dimensioni ridotte tipo per ispezionare gli elementi

[adottauncane]

Non mi sembra che si deformino o non ho capito cosa vuoi dire. Io vedo la barra di scorrimento...
Se è quella che non vuoi vedere e vuoi vedere tutte le immagini, prova a mettere questo al fondo del file
jea.css

Codice: [Seleziona]

@media (max-width: 400px) {

#jea-gallery-scroll img{
  margin:10px;
  float:left;
}

#jea-gallery-scroll {
height:500px !important;}

}
e regola la prima larghezza come ti serve... 400px o meno.

[tia89p]

No no! Non li ! Se clicchi su una di quelle immagini si apre una galleria del componente jea che tramite squeezenox fa vedere le immagini in primo piano! Quelle immagini sono tutte allungate o compresse se visualizzate a browser ridotto o su smartphone

[adottauncane]

Prova così:

Codice: [Seleziona]

@media (max-width: 400px) {

#sbox-window {
    max-height: 200px !important;
    max-width: 300px !important;
}
}
lo metti nel file di prima e lo regoli finché va bene.

[tia89p]

questo già è un bel passo avanti! Solo che se per esempio lo apro con cellulare in orizzontale esce un casino....non c'è qualche modo per fargli utlizzare come misure massime quelle della finestra in cui è visualizzato? sai che se c'è un modo per centrare questa finestra in mezzo allo schermo?
grazie mille intanto gentilissima

[adottauncane]

Non lo so. È così anche sullo schermo intero. Puoi scrivere una regola per diverse misure media, ad esempio.

[tia89p]

In che senso? Su cosa devo lavorare?

[adottauncane]

Codice: [Seleziona]

@media (max-width: 400px) {

#sbox-window {
    max-height: 200px !important;
    max-width: 300px !important;
}
}
questa è per lo schermo 400px, puoi farne una per 500px e una per 600px, aumentando i max-height e i max-width.

[tia89p]

Ah quindi con @ media max-width dico la dimensione della pagina?

[adottauncane]

Sì.

[tia89p]

E potrei fare la stessa cosa anche sull'altezza? nel senso controllare max-width max e anche max-hieght ?

[adottauncane]

Non credo. E poi a cosa servirebbe? L'altezza dell'immagine la regoli dal css.

[tomtomeight]

Un immagine rettangolare (e.g. 900 x 400 )si vedrà piena su uno smart device in orizzontale, un immagine (400 x 900) si vedrà piena invece su smart device verticale. Ogni magistero per invertire la visione produrrà o una parte in nero o una distorsione, non si scappa.

[tia89p]

Ah ecco! Proprio li volevo arrivare ! E invece per centrare l'immagine nella pagina? Si può fare qualcosa?