vendredi 7 août 2015

My form jumps upward when it comes to extra-small screen size

1Here is my index.html code

    <div class="row" style="margin-top:40%; margin-left:-2em;">
        <div class="col-xs-11 col-sm-10 col-md-6 col-lg-5 center">

            <form name="form1" action="" method="POST" class="form-horizontal " role="form">

                  <select class="form-control" id="sel1"  >
                    <option>עיר מגורים</option>
                    <option>תל אביב">תל אביב</option>
                    <option>דן כללי">גוש דן כלל</option>
                    <option>השרון">השרון</option>
                    <option>השפלה">השפלה</option>
                    <option>חיפה">חיפה</option>
                    <option>ירושלים">ירושלים</option>
                    <option>באר שבע והסביבה">באר שבע והסביבה</option>
                    <option>אשדוד, אשקלון והסביבה">אשדוד, אשקלון והסביבה</option>
                    <option>השפלה">השפלה</option>
                    <option>הגליל התחתון">הגליל התחתון</option>
                    <option>אחר </option>
                  </select>

                 <select class="form-control" id="sel1"  >
                    <option>רמת אנגלית </option>
                    <option>מתחיל </option>
                    <option>בינוני </option>
                    <option>גבוהה </option>
                 </select>

                 <select class="form-control" id="sel1" >
                    <option> מטרת לימוד </option>
                    <option> רמה אישית </option>
                    <option> לעסק </option>
                    <option> לראיון עבודה </option>
                    <option> נסיעה לחו"ל </option>
                    <option> למבחן אמי"ר\פסיכומטרי </option>
                    <option> לימודים </option>
                 </select>


                 <select class="form-control" id="sel1" >
                    <option> הכי חשוב לי בקורס </option>
                    <option> סביבת לימודים נעימה </option>
                    <option> מקום עם וותק וניסיון </option>
                    <option> גמישות וזמינות </option>
                    <option> מורים מקצועיים </option>
                    <option> מעטפת שלמה ללימוד אנגלית </option>
                    <option> הכל חשוב לי </option>
                 </select>


                 <select class="form-control" id="sel1" >
                    <option> תקציב </option>
                    <option> 1000 עד </option>
                    <option> 1000-2000 ש"ח </option>
                    <option> 2000-3000 ש"ח </option>
                    <option> 3000-6000 ש"ח </option>
                    <option> 6000 מעל </option>
                 </select>

                 <input name= "name" type="text" placeholder="שם" required>
                 <br>
                 <input name= "phone" type="text" placeholder="כתובת מייל שלך" required>
                 <br>
                 <input type="submit" value="!מצא לי קורס">

            </form> 
        </div>
        <!-- ------------------------------------------------------------------------------------------------ -->
        <div class="vedio col-xs-11 col-sm-8 center col-md-6  col-lg-5" >
            <video   controls >לחץ לצפייה בטבלת השוואה של קורסים שונים
              <source src="video.mp4" type="video/mp4">
              Your browser does not support the video tag.
            </video>
        </div>
        <!-- ---------------------------------------Video-------------------------------------------- -->
    </div>
        <!-- --------------------------------------1st ROW ENDS----------------------------------------------- -->
        <div class="row">
            <div class="col-sm-5 col-md-5 col-lg-5" style="padding-top:2em;">
                <p > <a href="http://ift.tt/1KUOBuX">לחץ לצפייה בטבלת השוואה של קורסים שונים </a></p>
            </div>
        <!-- --------------------------------------2nd ROW ENDS----------------------------------------------- -->
        </div>
    <!-- ----------------------------------------Container ENDS------------------------------------------------- -->    
</div>

it works fine in case of large screen size and also in medium screen size, now What i want it to remain there as it is in case of large screen size. i need it urgently anyone please... try to solve out my problem




Aucun commentaire:

Enregistrer un commentaire