Visualizzazione dei risultati da 1 a 2 su 2
  1. #1
    Utente di HTML.it
    Registrato dal
    Sep 2001
    residenza
    Napoli, Italia
    Messaggi
    1,060

    Caratteri più piccoli su mobile

    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?
    Immagini allegate Immagini allegate
    metatad
    graphic & web design

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2001
    residenza
    Napoli, Italia
    Messaggi
    1,060
    Risolto, impostando il font-size su 2em.
    metatad
    graphic & web design

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.