Ciao a tutti,
sto finendo di sistemare un sito wordpress. Il problema è questo: se provo ad ingrandire testo e contenuti su iPad e tablet in generale (col classico sistema di divaricare le dita) non succede nulla. I contenuti sono come "bloccati". La stessa operazione fatta su uno smartphone invece funziona perfettamente. Non riesco a capite dove stia il problema.
Il sito è questo: www.vivivenezia.net
I css riguardante la parte @media sono questi, copio e incollo dall'editor di wordpress del mio tema (Everest per la cronaca):
/* =============================== RESPONSIVE STYLES ============================ */
/*----------------------------------768-999 Width---------------------------------*/
@media only screen and (min-width: 768px) and (max-width: 999px) {
.global-wrapper {
width:768px;
}
.error-404 {
font-size:15em;
}
}
/*----------------------------------480-767 Width---------------------------------*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
.global-wrapper {
width:480px;
}
.one-fourth{
width:48%!important;
display:inline-block;
}
ul.gallery li {
width:46.16%!important;
}
ul.posts {
width:104%;
}
ul.posts li {
float:left;
width:47%!important;
margin-right:3%;
}
.error-404 {
font-size:9em;
}
}
/*------------------------------------0-767 Width---------------------------------*/
@media only screen and (max-width: 767px) {
.content,
.sidebar {
float:none;
width:auto!important;
}
.content,
.sidebar {
padding: 3em 30px 0 30px!important;
}
.alignleft,
.alignright {
float:none;
clear:both;
margin:0 0 1em 0;
}
.logo {
float:none;
width:100%;
text-align:center;
margin-bottom:0.5em;
}
.logo img {
display:inline!important;
}
.menu-container .menu{
display:none;
}
.select-menu {
display:block;
}
.header .widget-container {
text-align:center;
clear:left;
float:none;
}
.header .widget-social a {
display:inline-block;
float:none;
}
.one-third,
.two-third,
.three-fourth,
.footer-widgets .widget-container,
.gallery-details .description,
.gallery-details .gallery-slider-wrapper {
width:100%!important;
margin-right:0;
margin-left:0;
}
.gallery-details {
margin-bottom:2em;
}
ul.filter li a{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-right:3px;
margin-bottom:3px;
}
.comment-form {
width:100%;
}
.horizontal-tabs ul.tabs li{
float:none;
clear:both;
border:1px solid #ccc;
margin-bottom:-1px;
}
.horizontal-tabs ul.tabs li.active {
margin-top:0;
padding-bottom:0.5em;
}
.vertical-tabs ul.tabs ,
.vertical-tabs .panes{
float:none;
width:auto;
}
.vertical-tabs ul.tabs {
margin-bottom:1em;
}
.footer-widgets .widget-container {
margin-bottom:1em;
}
}
/*-----------------------------------0-479 Width---------------------------------*/
@media only screen and (max-width: 479px) {
.global-wrapper {
width:320px;
}
.column{
width:100%!important;
}
ul.gallery li {
width:97%!important;
}
.comment-list ol li ul {
padding:1em 0 0 0;
margin:0;
}
.post-meta {
padding:0.5em 0;
}
.post-meta span, .post-meta a.comments {
clear:both;
display:block;
float:none!important;
}
.error-404 {
font-size:12em;
}
Non sono un grande esperto di css quindi non riesco a capire quale istruzione devo modificare e/o aggiungere per poter ingrandire le dimensioni dei contenuti utilizando la semplice apertura delle dita. Come solitamente succedere in tutti gli altri siti.
Grazie infinite a chiunque riesca ad aiutarmi.

Rispondi quotando
