CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Uberswe
Uberswe

Reputation: 1058

cols overlapping on mobile devices

I have the following code which works fine showing two forms, with their fields and buttons side by side on a desktop resolution.

<div class="row">
    <div class="col-md-6 col-sm-6 first-nogutter">
        <div class="row">
            <form role="form" method="post" action="submit.php" id="check_avail2"
                                  autocomplete="off">

                <div class="col-md-10 col-sm-10 first-nogutter">
                    <input type="text" class=" form-control" id="phone" name="phone"
                                           placeholder="Phone">
                    <span class="input-icon"><i class="icon-user-8"></i></span>
                </div>
                <button type="submit" class="btn-check" id="submit-check2">Submit 1</button>


             </form>
         </div>
     </div>
     <div class="col-md-6 col-sm-6 adjustedcol">
         <div class="row">
             <form role="form" method="post" action="submit.php" id="check_avail3"
                                  autocomplete="off">
                 <div class="col-md-10 col-sm-10 first-nogutter">
                     <input type="text" class=" form-control" id="name" name="name"
                                           placeholder="Name">
                 </div>
                 <button type="submit" class="btn-check" id="submit-check3">Submit 2</button>

             </form>
         </div>
     </div>
 </div>

However when I switch to mobile the second field overlaps the first button and I would like the second field to be right below the first button.

Upvotes: 0

Views: 803

Answers (1)

vas
vas

Reputation: 960

check out this css jsfiddle

add this CSS 

@media (max-width: 767px) {
  .btn-check {width:120px; display:block;margin:auto}
 }

instead of this CSS

@media (max-width: 767px) {
    .btn-check {width:120px; display:block;position:absolute; bottom:-50px;     left:50%; margin-left:-60px;}
}

Upvotes: 1

Related Questions