Skeleton problema table non responsive

[Francesco Polese]

Ciao a tutti, ho la necessità di creare una tabella responsive usando skeleton ma mi trovo in difficoltà perchè se rimpicciolisco lo schermo o guardo da smartphone la tabella non si adatta provate qui: http://m.settimo-cielo.it/atmanviaggi.it/#servizi

<div id="servizi" class="twelve columns">

    	<h1>I nostri viaggi di gruppo</h1>

    	<table class="u-max-full-widt">
  			<thead>
    			<tr>
      			<th>Destinazione</th>
      			<th>Titolo</th>
      			<th>Date</th>
      			<th>Prezzo</th>
      			<th>Scarica</th>
    			</tr>
  			</thead>
  			<tbody>
    			<tr>
      			<td>Venezia</td>
      			<td>Le isole minori della Laguna Veneziana</td>
      			<td>12 Settembre</td>
      			<td>Euro 100,00</td>
      			<td><a class="button button-primary" href="documenti/gita_giornaliera_isoleminori_venezia.pdf" target="_blank">Download</a></td>
    			</tr>
    			<tr>
      			<td>Lago d'Iseo</td>
      			<td>La festa dei fiori e la Franciacorta</td>
      			<td>19 Settembre</td>
      			<td>Euro 92,00</td>
      			<td><a class="button button-primary" href="documenti/gita_giornaliera_iseo_2015.pdf" target="_blank">Download</a></td>
    			</tr>
    			<tr>
      			<td>Milano</td>
      			<td>EXPO</td>
      			<td>19-20 Settembre</td>
      			<td>Euro 225,00</td>
      			<td><a class="button button-primary" href="documenti/expo_settembre_ottobre_2015.pdf" target="_blank">Download</a></td>
    			</tr>
    			<tr>
      			<td>Sicilia</td>
      			<td>La Sicilia e il cous cous Festival</td>
      			<td>22-27 Settembre</td>
      			<td>da Euro 790,00+volo da Euro 170,00</td>
      			<td><a class="button button-primary" href="documenti/sicilia_settembre.pdf" target="_blank">Download</a></td>
    			</tr>
    			<tr>
      			<td>Milano</td>
      			<td>EXPO in giornata</td>
      			<td>03 Ottobre</td>
      			<td>da Euro 69,00</td>
      			<td><a class="button button-primary" href="documenti/expo_giornata_2015.pdf" target="_blank">Download</a></td>
    			</tr>
    			<tr>
      			<td>Comacchio</td>
      			<td>Comacchio e il delta del Po</td>
      			<td>04 Ottobre</td>
      			<td>Euro 85,00</td>
      			<td><a class="button button-primary" href="documenti/gita_giornaliera_comacchio_2015.pdf" target="_blank">Download</a></td>
    			</tr>
    			<tr>
      			<td>Mantova</td>
      			<td>Mantova & i luoghi di Don Camillo e Peppone</td>
      			<td>10 Ottobre</td>
      			<td>Euro 98,00</td>
      			<td><a class="button button-primary" href="documenti/gita_giornaliera_mantova.pdf" target="_blank">Download</a></td>
    			</tr>
    			<tr>
      			<td>Slovenia</td>
      			<td>Bled, la perla della Slovenia</td>
      			<td>11 Ottobre</td>
      			<td>Euro 72,00</td>
      			<td><a class="button button-primary" href="documenti/gita_giornaliera_bled_2015.pdf" target="_blank">Download</a></td>
    			</tr>
    			<tr>
      			<td>Merano</td>
      			<td>Merano e la festa dell'uva</td>
      			<td>18 Ottobre</td>
      			<td>Euro 55,00</td>
      			<td><a class="button button-primary" href="documenti/gita_merano_uva.pdf" target="_blank">Download</a></td>
    			</tr>
    			<tr>
      			<td>Trentino</td>
      			<td>Weekend dolce e salato in Trentino</td>
      			<td>24-25 Ottobre</td>
      			<td>Euro 235,00</td>
      			<td><a class="button button-primary" href="documenti/weekend_dolce_salato.pdf" target="_blank">Download</a></td>
    			</tr>
    			<tr>
      			<td>Ferrara</td>
      			<td>L'Arte al Castello Estense</td>
      			<td>28 Novembre</td>
      			<td>Euro 85,00</td>
      			<td><a class="button button-primary" href="documenti/gita_giornaliera_ferrara_2015.pdf" target="_blank">Download</a></td>
    			</tr>
    			<tr>
      			<td>Germania</td>
      			<td>La strada romantica</td>
      			<td>05-08 Dicembre</td>
      			<td>-</td>
      			<td><a class="button button-primary" href="#" target="_blank">Download</a></td>
    			</tr>
    			<tr>
      			<td>Mantova</td>
      			<td>Capodanno in nave...</td>
      			<td>31 Dicembre</td>
      			<td>Euro 150,00</td>
      			<td><a class="button button-primary" href="documenti/capodanno_mantova.pdf" target="_blank">Download</a></td>
    			</tr>
    			<tr>
      			<td>Budapest</td>
      			<td>Capodanno</td>
      			<td>31 Dicembre - 03 Gennaio</td>
      			<td>-</td>
      			<td><a class="button button-primary" href="#" target="_blank">Download</a></td>
    			</tr>
  </tbody>
</table>

    </div>

Questo è il mio codice qualcuno sa dirmi perchè i tasti Download escono dallo schermo dello smartphone?
Grazie mille
Francesco

 

[Marco_88]

Ciao, premesso che non conosco le meccaniche di skeleton. A colpo d'occhio sembrerebbe che le regole per il layout responsive non siano corrette o quantomeno sufficienti per layout ridotti. Riducendo lo schermo entro un certo limite le righe riescono a stare nella tabella, entrando invece in visualizzazione per layout smartphone i pulsanti e parte del testo vengono sbattuti fuori perché appunto non è più possibile gestirli tramite i css che sono stati impostati.
Per ovviare a questi problemi puoi ricorrere alle media queries e decidere cosa vuoi visualizzare e cosa non vuoi visualizzare per i layout ridotti.
Qui puoi trovare tutte le spiegazioni e gli esempi pratici per il caso:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

 

[Francesco Polese]

Ciao, premesso che non conosco le meccaniche di skeleton. A colpo d'occhio sembrerebbe che le regole per il layout responsive non siano corrette o quantomeno sufficienti per layout ridotti. Riducendo lo schermo entro un certo limite le righe riescono a stare nella tabella, entrando invece in visualizzazione per layout smartphone i pulsanti e parte del testo vengono sbattuti fuori perché appunto non è più possibile gestirli tramite i css che sono stati impostati.
Per ovviare a questi problemi puoi ricorrere alle media queries e decidere cosa vuoi visualizzare e cosa non vuoi visualizzare per i layout ridotti.
Qui puoi trovare tutte le spiegazioni e gli esempi pratici per il caso:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Grazie mille Marco!