CODEWITHSUNDEEP
csszurb-foundation
wobsoriano
wobsoriano

Reputation: 13434

Foundation grid cannot align

I have this free Philippines texting site and as you can see I can't align the captcha image with the textbox. It is below the captcha image. How can I align the textbox? Here is my code. I am using foundation css framework.

<body>
      <div class="row">
         <div class="large-12 columns">
            <div class="nav-bar right">
               <ul class="button-group">
                  <li><a href="index" class="button">Free SMS</a></li>
                  <li><a href="contact" class="button">Contact Me</a></li>
               </ul>
            </div>
            <img src="img/smsbanner.png">
            <hr/>
         </div>
      </div>
      <div class="row">
         <div class="large-4 large-centered columns">
            <div class="large-12 columns">
               <form action="sendsms.php" method="POST" name="txtform" data-abide>
                  <div class="row">
                     <div class="large-12 columns">
                        <div class="row">
                           <div class="small-3 columns">
                              <label for="right-label" class="right">+63</label>
                           </div>
                           <div class="small-9 columns">
                              <input type="text" name="txt_number" placeholder="10 digit number" required pattern="number" maxlength="10"/>
                              <small class="error">Phone number is required.</small>
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="row">
                     <div class="large-12 columns">
                        <textarea  rows="10" cols="50" placeholder="Message" required maxlength="200" name="txt_body" style="resize:none;"
                           onKeyDown="limitText(this.form.txt_body,this.form.countdown,200);" 
                           onKeyUp="limitText(this.form.txt_body,this.form.countdown,200);"></textarea>
                        <small class="error">Your message is required.</small>
                        <div class="row">
                        <div class="small-5 columns">
                        <img id="captcha" src="securimage/securimage_show.php" alt="CAPTCHA Image" />
                        </div>
                        <div class="small=7 columns">
                        <input type="text" name="captcha_code" size="10" maxlength="6" style="width:100px;"/>
                        <a href="#" onclick="document.getElementById('captcha').src = '/securimage/securimage_show.php?' + Math.random(); return false">[ Different Image ]</a>
                        </div>
                        </div>
                        <div class="row">
                           <div class="small-4 columns">
                              <input readonly type="text" name="countdown" size="3" value="200"> 
                           </div>
                           <div class="small-8 columns">
                              characters left.
                           </div>
                        </div>
                     </div>
                  </div>
                  <div class="row">
                     <div class="large-12 large-centered columns">
                        <input type="submit" class="button expand" value="Send" name="send_btn"/>
                     </div>
                  </div>
               </form>
            </div>
         </div>
      </div>

       <footer class="row">
       <?php include 'footer.php'; ?>
      </footer>
      <script src="js/vendor/jquery.js"></script>
      <script src="js/foundation.min.js"></script>
      <script>
         $(document).foundation();
      </script>
   </body>

Upvotes: 0

Views: 54

Answers (1)

Jer
Jer

Reputation: 26

Looks like a pretty minor problem.

<div class="small=7 columns">

should be

<div class="small-7 columns">

Upvotes: 1

Related Questions