Ho un comune form di contatto, con lo stesso identico codice sia per la versione desktop che per quella mobile.
Su quest'ultima, però, la dimensione dei caratteri all'interno della textarea sono della dimensione corretta, come impostato nel file CSS, mentre nei due campi di input appare decisamente più piccola. (vedi immagine allegata)
Ho provato anche a settare questi valori via Javascript, al caricamento della pagina ed utilizzando un ID univoco per ciascuno dei tre campi, ma il risultato non cambia. Aprendo l'inspector del browser, tutto sembra come dovrebbe essere (ciascun campo ha lo stesso font-size), ma nella realtà non è così.
Questo è il codice html del form:
codice:
<div id="frmContact"><div id="mail-status"></div>
<div><div class="lab" style="padding-top:20px;">Your name</div>
<span id="userName-info" class="info"></span><br/>
<input type="text" name="userName" id="userName" class="demoInputBox"></div>
<div><div class="lab">Your e-mail</div>
<span id="userEmail-info" class="info"></span><br/>
<input type="text" name="userEmail" id="userEmail" class="demoInputBox"></div>
<div><div class="lab">Your message</div>
<span id="content-info" class="info"></span><br/>
<textarea name="content" id="content" class="demoInputBox" cols="60" rows="10"></textarea></div>
<div><button name="submit" id ="sender" class="btnAction" onClick="sendContact();">SEND</button></div>
</div>
e questo è il codice CSS relativo:
codice:
#frmContact { border-top:#a40015 2px solid;
padding:10px;
font-size: 18px;
line-height: 20px;
}
#frmContact div {
margin-bottom: 15px
}
#frmContact div label {
margin-left: 5px
}
.demoInputBox {
padding:5px;
border:#2e2e2e 1px solid;
min-width: 500px;
width: 90%;
min-height: 32px;
color:#2e2e2e;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 20px;
}
#content {
min-height: 212px;
}
.error, .success {
padding: 5px 10px;
background-color: #a40015;
color: #fff;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 20px;
text-align: center;
}
.info {
font-size:.8em;
color: #a40015;
letter-spacing:2px;
padding-left:5px;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
font-style: italic;
font-size: 18px;
line-height: 20px;
}
.btnAction {
background-color:#a40015;
padding:10px 40px;
color:#fff;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
border:#a40015 2px solid;
font-size: 26px;
line-height: 26px;
cursor:hand;
cursor:pointer;
}
.lab {
color:#a40015;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 700;
font-size: 20px;
line-height: 20px;
}
Questo, infine, è ciò che mi dà l'inspector:
codice:
<div><div class="lab" style="padding-top:20px;">Your name</div><span id="userName-info" class="info"></span><br>
<input type="text" name="userName" id="userName" class="demoInputBox" style="font-size: 18px; line-height: 20px;"></div>
<div><div class="lab">Your e-mail</div>
<span id="userEmail-info" class="info"></span><br>
<input type="text" name="userEmail" id="userEmail" class="demoInputBox" style="font-size: 18px; line-height: 20px;"></div>
<div><div class="lab">Your message</div>
<span id="content-info" class="info"></span><br>
<textarea name="content" id="content" class="demoInputBox" cols="60" rows="10" style="font-size: 18px; line-height: 20px;"></textarea></div>
Da cosa può dipendere, e come risolvere?