Modificare template per smartphone

[frank]

Ho messo delle immagini-link in template/index_body.html però se stringo la finestra le immagini vanno fuori fase. Dovrei fare in modo che quando si guarda dal telefono o tablet le immagini spariscono e appaiono solo le scritte.
http://gruppoalveo.it/forum/index.php

[Sir Xiradorn]

Allora vediamo di ridare un po di forma al codice e di sistema il tutto. Userò come riferimento proprio il tuo template.
index_body.html
Trova:

Codice: Seleziona tutto

<div style=" width:auto; height:75px; margin-bottom:15px;text-align:center;">
<a href="http://www.ilgiardinodeilibri.it/__libri/_alimentazione_cucina/?pn=5106">
<img style="width:150px; height:70px; margin-left:10px;" src='styles/prosilver/theme/images/libri.jpg' alt='Libri' title='I libri del benessere'>
</a>

<a href='https://www.idealandia.it/cucina_estrattori_slow_juicer/?a=9LPnN&b=h50LM'>
<img style="width:150px; height:70px; margin-left:10px;" src='styles/prosilver/theme/images/estrattori.jpg' alt='Estrattori' title='Estrattori di succhi vivi'>
</a>

<a href="http://www.amazon.it/gp/search?ie=UTF8&camp=3370&creative=23322&index=kitchen&keywords=frullatore&linkCode=ur2&tag=gruppoitforum-21">
<img style="width:110px; height:70px; margin-left:10px;" src='styles/prosilver/theme/images/frullatori.jpg' alt='Frullatori' title='Frullatori di ogni genere'>
</a>

<a href="http://www.amazon.it/gp/search?ie=UTF8&camp=3370&creative=23322&index=kitchen&keywords=vaporiera&linkCode=ur2&tag=gruppoitforum-21">
<img style="width:110px; height:70px; margin-left:10px;" src='styles/prosilver/theme/images/vaporiere.jpg' alt='Vaporiere' title='Vaporiere di tutti i tipi'>
</a>


<a href="http://www.macrolibrarsi.it/home/prodotti.php?pn=4632">
<img style="width:180px; height:70px; margin-left:10px;" src='styles/prosilver/theme/images/bio-shop.jpg' alt='Bio-shop' title='Prodotti biologici'>
</a>
</div>

e sostituiscilo con

Codice: Seleziona tutto

<div class="x-index_body_banner">
    <a href="http://www.ilgiardinodeilibri.it/__libri/_alimentazione_cucina/?pn=5106">
        <img src='styles/prosilver/theme/images/libri.jpg' alt='Libri' title='I libri del benessere'>
    </a>
    <a href='https://www.idealandia.it/cucina_estrattori_slow_juicer/?a=9LPnN&b=h50LM'>
        <img src='styles/prosilver/theme/images/estrattori.jpg' alt='Estrattori' title='Estrattori di succhi vivi'>
    </a>
    <a href="http://www.amazon.it/gp/search?ie=UTF8&camp=3370&creative=23322&index=kitchen&keywords=frullatore&linkCode=ur2&tag=gruppoitforum-21">
        <img src='styles/prosilver/theme/images/frullatori.jpg' alt='Frullatori' title='Frullatori di ogni genere'>
    </a>
    <a href="http://www.amazon.it/gp/search?ie=UTF8&camp=3370&creative=23322&index=kitchen&keywords=vaporiera&linkCode=ur2&tag=gruppoitforum-21">
        <img src='styles/prosilver/theme/images/vaporiere.jpg' alt='Vaporiere' title='Vaporiere di tutti i tipi'>
    </a>
    <a href="http://www.macrolibrarsi.it/home/prodotti.php?pn=4632">
        <img src='styles/prosilver/theme/images/bio-shop.jpg' alt='Bio-shop' title='Prodotti biologici'>
    </a>
</div>

Poi apri il tuo file di stile come ad esempio lo stylesheet.css
Alla fine del file aggiungi

Codice: Seleziona tutto

/** Xiradorn - AutoResize Img Banner */
.x-index_body_banner {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    text-align: center; 
}

.x-index_body_banner a {
    display: inline-block;
    width: auto;
    width: 15%;
    position: relative;
    padding: 0; 
}

.x-index_body_banner a img {
    width: 100%;
    margin: 0 auto;
    /*height: 100px * disabilita questo commento se vuoi avere immagini tutte uguali - Sconsigliato */
}
/** Xiradorn - AutoResize Img Banner */

Salva, suta cache e simili.

[frank]

Ci siamo quasi, come vedi non è bello come prima, dovresti integrarmi questo mio css originale

<div style=" width:auto; height:75px; margin-bottom:15px; text-align:center;">

[Sir Xiradorn]

Non lo è diciamo perchè hai le immagini di altezze differenti. Se le vuoi di altezze uguali devi procedere in una meniera diversa. Mi hai fatto sudare un po di più perchè ho dovuto fare che tutto sia dinamico. Per fortuna ho qualche asso nella manica. Se le immagini avessero avuto la stessa altezza sarebbe stato mooooooolto meglio a fini grafici. Ma de gustibus come si dice
Index_body.html
Trova

Codice: Seleziona tutto

    <div style=" width:auto; height:75px; margin-bottom:15px;text-align:center;">
    <a href="http://www.ilgiardinodeilibri.it/__libri/_alimentazione_cucina/?pn=5106">
    <img style="width:150px; height:70px; margin-left:10px;" src='styles/prosilver/theme/images/libri.jpg' alt='Libri' title='I libri del benessere'>
    </a>

    <a href='https://www.idealandia.it/cucina_estrattori_slow_juicer/?a=9LPnN&b=h50LM'>
    <img style="width:150px; height:70px; margin-left:10px;" src='styles/prosilver/theme/images/estrattori.jpg' alt='Estrattori' title='Estrattori di succhi vivi'>
    </a>

    <a href="http://www.amazon.it/gp/search?ie=UTF8&camp=3370&creative=23322&index=kitchen&keywords=frullatore&linkCode=ur2&tag=gruppoitforum-21">
    <img style="width:110px; height:70px; margin-left:10px;" src='styles/prosilver/theme/images/frullatori.jpg' alt='Frullatori' title='Frullatori di ogni genere'>
    </a>

    <a href="http://www.amazon.it/gp/search?ie=UTF8&camp=3370&creative=23322&index=kitchen&keywords=vaporiera&linkCode=ur2&tag=gruppoitforum-21">
    <img style="width:110px; height:70px; margin-left:10px;" src='styles/prosilver/theme/images/vaporiere.jpg' alt='Vaporiere' title='Vaporiere di tutti i tipi'>
    </a>


    <a href="http://www.macrolibrarsi.it/home/prodotti.php?pn=4632">
    <img style="width:180px; height:70px; margin-left:10px;" src='styles/prosilver/theme/images/bio-shop.jpg' alt='Bio-shop' title='Prodotti biologici'>
    </a>
    </div>

Sostituisci con

Codice: Seleziona tutto

<div class="x-index_body_banner">
    <a href="http://www.ilgiardinodeilibri.it/__libri/_alimentazione_cucina/?pn=5106" id="libri" title='I libri del benessere' alt='Libri'>
        &nbsp;
    </a>
    <a href='https://www.idealandia.it/cucina_estrattori_slow_juicer/?a=9LPnN&b=h50LM' id="estrattori" alt='Estrattori' title='Estrattori di succhi vivi'>
        &nbsp;
    </a>
    <a href="http://www.amazon.it/gp/search?ie=UTF8&camp=3370&creative=23322&index=kitchen&keywords=frullatore&linkCode=ur2&tag=gruppoitforum-21" id="frullatori" alt='Frullatori' title='Frullatori di ogni genere'>
        &nbsp;
    </a>
    <a href="http://www.amazon.it/gp/search?ie=UTF8&camp=3370&creative=23322&index=kitchen&keywords=vaporiera&linkCode=ur2&tag=gruppoitforum-21" id="vaporiere" alt='Vaporiere' title='Vaporiere di tutti i tipi'>
        &nbsp;
    </a>
    <a href="http://www.macrolibrarsi.it/home/prodotti.php?pn=4632" id="bio-shop" alt='Bio-shop' title='Prodotti biologici'>
        &nbsp;
    </a>
</div>

Stylesheet.css
Aggiungi alla fine:

Codice: Seleziona tutto

/********************************************/
/* Xiradorn - Dynamic AutoResize Img Banner */
/********************************************/
.x-index_body_banner {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    text-align: center; 
}

.x-index_body_banner a {
    display: inline-block;
    width: auto;
    width: 15%;
    position: relative;
    padding: 4% 0px; /* xir hdyn - a sort of dynamic height */
}

.x-index_body_banner #libri,
.x-index_body_banner #estrattori,
.x-index_body_banner #frullatori,
.x-index_body_banner #vaporiere,
.x-index_body_banner #bio-shop {
    background-color: transparent; 
    background-repeat: no-repeat; 
    background-attachment: scroll; 
    background-position: center center;
    background-size: 100% 100%; /* for dinamize fill with css3 tec */
}

.x-index_body_banner #libri { background-image: url('http://gruppoalveo.it/forum/styles/prosilver/theme/images/libri.jpg') }
.x-index_body_banner #estrattori { background-image:  url('http://gruppoalveo.it/forum/styles/prosilver/theme/images/estrattori.jpg') }
.x-index_body_banner #frullatori { background-image:  url('http://gruppoalveo.it/forum/styles/prosilver/theme/images/frullatori.jpg') }
.x-index_body_banner #vaporiere { background-image:  url('http://gruppoalveo.it/forum/styles/prosilver/theme/images/vaporiere.jpg') }
.x-index_body_banner #bio-shop { background-image:  url('http://gruppoalveo.it/forum/styles/prosilver/theme/images/bio-shop.jpg') }
/** Xiradorn - Dynamic AutoResize Img Banner */

EDIT: Fatto un piccolo fix

[frank]

Va meglio ma le immagini sono grandi. Se vedi, l'altezza di ogni immagine del mio codice è 70px, semmai è il width che cambia.

Codice: Seleziona tutto

<!--<div style=" width:auto; height:75px; margin-bottom:15px;text-align:center;">
<a href="http://www.ilgiardinodeilibri.it/__libri/_alimentazione_cucina/?pn=5106">
<img style="width:150px; height:70px; margin-left:10px;" src='styles/prosilver/theme/images/libri.jpg' alt='Libri' title='I libri del benessere'>
</a>

<a href='https://www.idealandia.it/cucina_estrattori_slow_juicer/?a=9LPnN&b=h50LM'>
<img style="width:150px; height:70px; margin-left:10px;" src='styles/prosilver/theme/images/estrattori.jpg' alt='Estrattori' title='Estrattori di succhi vivi'>
</a>

<a href="http://www.amazon.it/gp/search?ie=UTF8&camp=3370&creative=23322&index=kitchen&keywords=frullatore&linkCode=ur2&tag=gruppoitforum-21">
<img style="width:110px; height:70px; margin-left:10px;" src='styles/prosilver/theme/images/frullatori.jpg' alt='Frullatori' title='Frullatori di ogni genere'>
</a>

<a href="http://www.amazon.it/gp/search?ie=UTF8&camp=3370&creative=23322&index=kitchen&keywords=vaporiera&linkCode=ur2&tag=gruppoitforum-21">
<img style="width:110px; height:70px; margin-left:10px;" src='styles/prosilver/theme/images/vaporiere.jpg' alt='Vaporiere' title='Vaporiere di tutti i tipi'>
</a>

<a href="http://www.macrolibrarsi.it/home/prodotti.php?pn=4632">
<img style="width:180px; height:70px; margin-left:10px;" src='styles/prosilver/theme/images/bio-shop.jpg' alt='Bio-shop' title='Prodotti biologici'>
</a>
</div>-->

[Sir Xiradorn]

Se cambia solo il width e l'altezza è fissa le immagini si schiacciano lungo l'asse x. Questo comporta uno schiacciamento orizzontale che compromette l'immagine. Quello che devi fare per avere immagini responsive di altezze diverse con un solo colpo è questo: adattare dinamicamente l'altezza e facendo un riempimento o fill tramite il fondo che sia una sorta di mediazione delle stesse. Se ti piazzi height: 70px non hai responsivity perchè blocchi una dimensione. Per averla devi avere un resize proporzionale

In Sostanza quando le immagini hanno tutte le stesse dimensioni non ci sono problemi e puoi lavorare in maniera precisa a pixel.

Quando le immagini hanno altezze diverse puoi o procedere di volta in volta a aggiustare le dimensioni per ogni singolo elemento, oppure puoi farlo in maniera intelligente e auto adattarlo a casi futuri. Per la prima scelta puoi modificare le dimensioni singole come segue (ma è assolutamente sconsigliabile e ti faccio l'esempio):

Codice: Seleziona tutto

.x-index_body_banner #libri { ... }

Per la seconda opzione invece sei tu che vincoli a far fare all'immagine quello che vuoi anche se il dispositivo si restringe.Ma in questo frangente vi sono due vie che puoi applicare:
- JS + JQuery: usare jquery per calcolare una dimensione ottimale da dare all'immagine e tramite la funzione apposita cercare di autoridimensionarle. Personalmente non sono troppo esperto di quella libreria quindi non posso esserti troppo di aiuto
- CSS Pure (quella che ti ho scritto sopra): questa tecnica è più semplice e ti permette di ridimensionare dinamicamente immagini di grandezze diverse.

Per variare un po le dimensioni a tuo piacimento comunque vai a fare degli aggiustamenti su queste due variabili ovvero

Codice: Seleziona tutto

width: 15%; /* Serve a variare la lunghezza dinamica */

e

Codice: Seleziona tutto

padding: 4% 0px; /* Serve a variare l'altezza dinamica ottenuta dal padding */ /* xir hdyn - a sort of dynamic height */

E' facile variare la larghezza dinamicamente ma non l'altezza che è meno suscettibile a modificazioni

Se vuoi un po di margine sottostante trova

Codice: Seleziona tutto

.x-index_body_banner {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    text-align: center;
}

e cambialo in

Codice: Seleziona tutto

.x-index_body_banner {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    text-align: center;
    margin-bottom: 15px;
}

Se hai altre domande falle tranquillamente ma spero di averti reso un po più chiare le cose. Se ho parlato troppo difficile provo a usare termini più semplici

[frank]

Va meglio http://gruppoalveo.it/forum/index.php

c'è Estrattori di succhi e Bio-shop che rimangono un po' schiacciati in larghezza, poi se vedi sono un po' tutte grandi

[Sir Xiradorn]

Per avere un po più piccole i parametri da toccare sono i seguenti

Codice: Seleziona tutto

width: 15% /* che tu hai modifical al 16% se non sbaglio */
padding: 4% 0px; /* Serve a variare l'altezza dinamica ottenuta dal padding */ /* xir hdyn - a sort of dynamic height */

Giocando co sti due puoi variare le dimensioni di tutte le immagini insieme.

IMPORTANTE una ultima piccola dimenticanza di ripulitura dei link
Trova:

Codice: Seleziona tutto

.x-index_body_banner a {
    display: inline-block;
    width: auto;
    width: 15%;
    position: relative;
    padding: 4% 0px; /* xir hdyn - a sort of dynamic height */
}

e sostituiscilo con

Codice: Seleziona tutto

.x-index_body_banner a {
    display: inline-block;
    width: auto;
    width: 15%;
    position: relative;
    padding: 4% 0px; /* xir hdyn - a sort of dynamic height */
    text-decoration: none !important;
}

[frank]

Sembra meglio. Quando è in formato smartphone non è molto leggibile, quasi quasi lì toglierei le immagini e ci lascerei solo i link, che dici?

[Sir Xiradorn]

Correzione fatta per una migliore leggibilità in fase responsive

Codice: Seleziona tutto

/********************************************/
/* Xiradorn - Dynamic AutoResize Img Banner */
/********************************************/
.x-index_body_banner {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    text-align: center; 
    margin-bottom: 15px;
}

.x-index_body_banner a {
    display: inline-block;
    width: 14%;
    position: relative;
    padding: 3.6% 0px; /* xir hdyn - a sort of dynamic height */
    text-decoration: none !important;
}

.x-index_body_banner #libri,
.x-index_body_banner #estrattori,
.x-index_body_banner #frullatori,
.x-index_body_banner #vaporiere,
.x-index_body_banner #bio-shop {
    background-color: transparent; 
    background-repeat: no-repeat; 
    background-attachment: scroll; 
    background-position: center center;
    background-size: 100% 100%; /* for dinamize fill with css3 tec */
}

.x-index_body_banner #libri { background-image: url('http://gruppoalveo.it/forum/styles/prosilver/theme/images/libri.jpg') }
.x-index_body_banner #estrattori { background-image:  url('http://gruppoalveo.it/forum/styles/prosilver/theme/images/estrattori.jpg') }
.x-index_body_banner #frullatori { background-image:  url('http://gruppoalveo.it/forum/styles/prosilver/theme/images/frullatori.jpg') }
.x-index_body_banner #vaporiere { background-image:  url('http://gruppoalveo.it/forum/styles/prosilver/theme/images/vaporiere.jpg') }
.x-index_body_banner #bio-shop { background-image:  url('http://gruppoalveo.it/forum/styles/prosilver/theme/images/bio-shop.jpg') }

/* Responsive Fix for better reading */
@media screen and (max-width: 700px) {
    .x-index_body_banner a {
        padding: 4.5% 10px
    }
}
@media screen and (max-width: 500px) {
    .x-index_body_banner a {
        padding: 7% 30px
    }
}
/* Responsive Fix for better reading */
/** Xiradorn - Dynamic AutoResize Img Banner */