css
  • forms
  • mobile
  • media-queries
  • 2017-01-31 4 views 1 likes 
    1

    CSSは、私はすべてを試みたモバイルデバイス

    <!-- Main --> 
     
    <div id="main-wrapper"> 
     
        <div class="container"> 
     
         <div id="content"> 
     
          <article> 
     
           <!-- Form Code Start --> 
     
           <form id='contactus' action='<?php echo $formproc->GetSelfScript(); ?>' method='post' accept-charset='UTF-8'> 
     
            <fieldset> 
     
             <legend>Contact us</legend> 
     
            
     
             <input type='hidden' name='submitted' id='submitted' value='1'/> 
     
             <input type='hidden' name='<?php echo $formproc->GetFormIDInputName(); ?>' value='<?php echo $formproc->GetFormIDInputValue(); ?>'/> 
     
             <input type='text2' class='spmhidip' name='<?php echo $formproc->GetSpamTrapInputName(); ?>' /> 
     
            
     
             <div class='short_explanation'>* required fields</div> 
     
            
     
             <div> 
     
              <span class='error'> 
     
               <?php echo $formproc->GetErrorMessage(); ?> 
     
              </span> 
     
             </div> 
     
             <div class='container2'> 
     
              <label for='name' >Your Full Name*: </label><br/> 
     
              <input type='text2' name='name' id='name' value='<?php echo $formproc->SafeDisplay('name') ?>' maxlength="50" /><br/> 
     
              <span id='contactus_name_errorloc' class='error'></span> 
     
             </div> 
     
             <div class='container2'> 
     
              <label for='email' >Email Address*:</label><br/> 
     
              <input type='text2' name='email' id='email' value='<?php echo $formproc->SafeDisplay('email') ?>' maxlength="50" /><br/> 
     
              <span id='contactus_email_errorloc' class='error'></span> 
     
             </div> 
     
             <div class='container2'> 
     
              <label for='phone' >Phone Number:</label><br/> 
     
              <input type='text2' name='phone' id='phone' value='<?php echo $formproc->SafeDisplay('phone') ?>' maxlength="15" /><br/> 
     
              <span id='contactus_phone_errorloc' class='error'></span> 
     
             </div> 
     
             <div class='container2'> 
     
              <label for='query_type' >Regarding:</label><br/> 
     
              <select name='query_type'> 
     
               <option>Support</option> 
     
               <option>Request A Quote</option> 
     
               <option>Trouble uploading a file</option> 
     
               <option>Other</option> 
     
              </select> 
     
              <span id='contactus_email_errorloc' class='error'></span> 
     
             </div> 
     
             <div class='container2'> 
     
              <label for='message' >Message:</label><br/> 
     
              <span id='contactus_message_errorloc' class='error'></span> 
     
              <textarea rows="10" cols="50" name='message' id='message'><?php echo $formproc->SafeDisplay('message') ?></textarea> 
     
             </div> 
     
             <div class='container2'> 
     
              <div><img alt='Captcha image' src='show-captcha.php?rand=1' id='scaptcha_img' /></div> 
     
              <label for='scaptcha' >Enter the code above here:</label> 
     
              <input type='text2' name='scaptcha' id='scaptcha' maxlength="10" /><br/> 
     
              <span id='contactus_scaptcha_errorloc' class='error'></span> 
     
              <div class='short_explanation'>Can't read the image? 
     
              <a href='javascript: refresh_captcha_img();'>Click here to refresh</a>.</div> 
     
             </div> 
     
             <div class='container2'> 
     
              <input type='submit' name='Submit' value='Submit' /> 
     
             </div> 
     
            </fieldset> 
     
           </form> 
     
          </article> 
     
         </div> 
     
        </div> 
     
    </div>

    #contactus fieldset{ 
     
        padding:20px; 
     
        border:1px solid #ccc; 
     
        -moz-border-radius: 10px; 
     
        -webkit-border-radius: 10px; 
     
        -khtml-border-radius: 10px; 
     
        border-radius: 10px; 
     
        margin:0 auto; 
     
        width:459px; 
     
    } 
     
    
     
    #contactus legend, h2{ 
     
        font-family : Arial, sans-serif; 
     
        font-size: 1.3em; 
     
        font-weight:bold; 
     
        color:#333; 
     
    } 
     
    
     
    #contactus label2{ 
     
        font-family : Arial, sans-serif; 
     
        font-size:0.8em; 
     
        font-weight: bold; 
     
    } 
     
    
     
    /* #contactus input[type="text2"], textarea{ 
     
        font-family : Arial, Verdana, sans-serif; 
     
        font-size: 0.8em; 
     
        line-height:140%; 
     
        color : #000; 
     
        padding : 3px; 
     
        border : 1px solid #999; 
     
        -moz-border-radius: 5px; 
     
        -webkit-border-radius: 5px; 
     
        -khtml-border-radius: 5px; 
     
        border-radius: 5px; 
     
    } 
     
    
     
    #contactus input[type="text2"]{ 
     
        height:26px; 
     
        width:459px; 
     
        -webkit-border-radius: 5px; 
     
        -moz-border-radius: 5px; 
     
        border-radius: 5px; 
     
    } 
     
    
     
    #contactus #scaptcha{ 
     
        width:80px; 
     
        height:26px; 
     
    } 
     
    
     
    #contactus input[type="submit2"]{ 
     
        width:100px; 
     
        height:30px; 
     
        padding-left:0px; 
     
        -webkit-border-radius: 5px; 
     
        -moz-border-radius: 5px; 
     
        border-radius: 5px; 
     
    } 
     
    
     
    #contactus textarea2{ 
     
        height:120px; 
     
        width:469px; 
     
        -webkit-border-radius: 8px; 
     
        -moz-border-radius: 8px; 
     
        border-radius: 8px; 
     
    } 
     
    
     
    #contactus input[type="text2"]:focus,textarea:focus{ 
     
        color : #009; 
     
        border : 1px solid #0E0D0D; 
     
        background-color : #D1E7FF; 
     
        font-weight:bold; 
     
    } 
     
    
     
    #contactus .container2{ 
     
        margin-top:8px; 
     
        margin-bottom: 10px; 
     
    } 
     
    
     
    #contactus .error{ 
     
        font-family: Verdana, Arial, sans-serif; 
     
        font-size: 0.7em; 
     
        color: #900; 
     
        background-color : #FF8088; 
     
    } 
     
    
     
    #contactus fieldset#antispam{ 
     
        padding:2px; 
     
        border-top:1px solid #EEE; 
     
        border-left:0; 
     
        border-right:0; 
     
        border-bottom:0; 
     
        width:350px; 
     
    } 
     
    
     
    #contactus fieldset#antispam legend{ 
     
        font-family : Arial, sans-serif; 
     
        font-size: 0.8em; 
     
        font-weight:bold; 
     
        color:#333; 
     
    } 
     
    
     
    #contactus .short_explanation{ 
     
        font-family : Arial, sans-serif; 
     
        font-size: 0.8em; 
     
        color:#333; 
     
    } 
     
    
     
    /* spam_trap: This input is hidden. This is here to trick the spam bots*/ 
     
    #contactus .spmhidip{ 
     
        display:none; 
     
        width:10px; 
     
        height:3px; 
     
    } 
     
    #fg_crdiv{ 
     
        font-family : Arial, sans-serif; 
     
        font-size: 0.3em; 
     
        opacity: .2; 
     
        -moz-opacity: .2; 
     
        filter: alpha(opacity=20); 
     
    } 
     
    #fg_crdiv p{ 
     
        display:none; 
     
    }

    ページをオフに実行するために私のフォームを引き起こしている、私が影響を与えているかを把握することはできませんフォームをモバイルデバイス上の画面に表示させることができます。 Here is the link to the form.

    +0

    私の考えで取り組んで取得するポイントを破ることは、あなたがトライしていないということですあなたが試したコードを見ることができます。 – happymacarts

    +0

    ここにコードページ全体を渡すことはできません –

    +0

    ブートストラップを使用している場合は、メディアクエリをコード化する必要はありません。コンテナdivのページコンテンツ – happymacarts

    答えて

    0

    main.cssには、入力フィールドの幅やフィールドセットの幅など、いくつかの幅がハードコードされています。ただ、それらを削除するか、または割合でそれらを作り、あなたのページが応答しなくなるだろう

    +0

    それはまだ変わっていません、私は逃したものがありますか?今、デスクトップのビューが台無しになっています。フォームはデスクトップのコンテナに広がっています –

    0

    スニペットから伝えるのは難しいですが、次のコードは、

    ハードコーディングされた幅があっ動作しているよう文書インスペクタに置かれたとき問題を引き起こし、また、あなたの他のメディアクエリを変更する必要があり、それはすべてのサイズ

    @media screen and (max-width: 736px){ 
     
        body, input, select, textarea { 
     
         line-height: 2em; 
     
         width: 100%; 
     
        } 
     
        #contactus input[type="text2"] { 
     
         height: 26px; 
     
         width: 100%; 
     
         -webkit-border-radius: 5px; 
     
         -moz-border-radius: 5px; 
     
         border-radius: 5px; 
     
        } 
     
    }
    <link rel="stylesheet prefetch" href="https://www.munroprinting.com/assets/css/main.css"> 
     
    <div class="container"> 
     
        <div id="content"> 
     
        <article> 
     
         <!-- Form Code Start --> 
     
         <form id="contactus" action="/upload/contactform.php" method="post" accept-charset="UTF-8"> 
     
         <fieldset> 
     
          <legend>Contact us</legend> 
     
    
     
          <input type="hidden" name="submitted" id="submitted" value="1"> 
     
          <input type="hidden" name="id3a31ca8adb123c3ea7b9" value="432ce4949a45b03c0299f37b81305012"> 
     
          <input type="text2" class="spmhidip" name="sp5d7f1e2089582b5699eab58b16dad351"> 
     
    
     
          <div class="short_explanation">* required fields</div> 
     
    
     
          <div><span class="error"></span></div> 
     
          <div class="container2"> 
     
          <label for="name">Your Full Name*: </label><br> 
     
          <input type="text2" name="name" id="name" value="" maxlength="50" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;"><br> 
     
          <span id="contactus_name_errorloc" class="error"></span> 
     
          </div> 
     
          <div class="container2"> 
     
          <label for="email">Email Address*:</label><br> 
     
          <input type="text2" name="email" id="email" value="" maxlength="50"><br> 
     
          <span id="contactus_email_errorloc" class="error"></span> 
     
          </div> 
     
          <div class="container2"> 
     
          <label for="phone">Phone Number:</label><br> 
     
          <input type="text2" name="phone" id="phone" value="" maxlength="15"><br> 
     
          <span id="contactus_phone_errorloc" class="error"></span> 
     
          </div> 
     
          <div class="container2"> 
     
          <label for="query_type">Regarding:</label><br> 
     
          <select name="query_type"> 
     
         <option>Support</option> 
     
         <option>Request A Quote</option> 
     
         <option>Trouble uploading a file</option> 
     
         <option>Other</option> 
     
        </select> 
     
          <span id="contactus_email_errorloc" class="error"></span> 
     
          </div> 
     
          <div class="container2"> 
     
          <label for="message">Message:</label><br> 
     
          <span id="contactus_message_errorloc" class="error"></span> 
     
          <textarea rows="10" cols="50" name="message" id="message"></textarea> 
     
          </div> 
     
          <div class="container2"> 
     
          <div><img alt="Captcha image" src="show-captcha.php?rand=1" id="scaptcha_img"></div> 
     
          <label for="scaptcha">Enter the code above here:</label> 
     
          <input type="text2" name="scaptcha" id="scaptcha" maxlength="10"><br> 
     
          <span id="contactus_scaptcha_errorloc" class="error"></span> 
     
          <div class="short_explanation">Can't read the image? 
     
           <a href="javascript: refresh_captcha_img();">Click here to refresh</a>.</div> 
     
          </div> 
     
    
     
    
     
          <div class="container2"> 
     
          <input type="submit" name="Submit" value="Submit"> 
     
          </div> 
     
    
     
         </fieldset> 
     
         </form> 
     
        </article> 
     
    
     
        </div> 
     
    </div>

    +0

    メディアクエリを入力する前に元のコードを削除する必要がありますか?モバイルサイトでは何もしないようです。 –

    +0

    すべてのメディアクエリを削除し、必要に応じて構築する方が簡単かもしれません。それらがロードされる順序は、どのように解釈されるのかにとって重要であることを覚えておいてください。 – happymacarts

    +0

    私はコードの行をどこに置いたのでしょうか? –

    関連する問題