Rosti Rosti - 6 days ago 5
CSS Question

Width of from-control is too big

I trying to make my web site responsive for mobile phones and using bootstrap 3 for that, all is good but element "form-control" has big width(bigger then phone screen) and I think that's why my page has little blank space at the right. How can I do responsive form control?
That all is in container-fluid and all row's work correctly. I have container-fluid then row with class "grey-bg" and 3 rows in it.Last row is my form.

<div class="row">
<div class="grey-bg">

<div class="col-lg-1"></div>

<div class="row">
<div class="bookTitle imgBottomText col-lg-4 col-md-5 " style="padding: 0">
<h3>The secret <span>free</span> eBook we offer!</h3>
<br>
<p>Enter your email address and recieve this free eBook & to also subscribe to our weekly newsletter</p>
<br>
</div>
</div>
<div class="row">
<div class="bookImage col-lg-3 col-md-4"></div>

<div class="col-lg-2 col-md-2">
<h5 class="title1"><i class="fa fa-heart-o"></i>&nbsp;Lorem ipsum dolor</h5>
<h5 class="title2"><i class="fa fa-paperclip"></i>&nbsp;Lorem ipsum dolor</h5>
<h5 class="title3"><i class="fa fa-envelope-o"></i>&nbsp;Lorem ipsum dolor</h5>
</div>
</div>
<div class="row">

<form class="form-inline newslatter-form">
<div class="col-xs-8">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<button type="submit" class="btn btn-warning submit-newsletter"><i class="fa fa-angle-right"></i></button>
</div>
</div>
</form>
</div>
</div>
<div class="col-lg-2"></div>
</div>

Answer

The .row class gives you negative margin to the sides. I added a .container class as content wrap and commented the unnecessary .row classes.

Note that if you leave the commented rows un-commented, the text will have no breathe and will be too tight to the viewport sides.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <!-- <div class="row"> -->
      <div class="grey-bg">

              <div class="col-lg-1"></div>
            <!-- <div class="row"> -->
              <div class="bookTitle imgBottomText col-lg-4 col-md-5 " style="padding: 0">
                  <h3>The secret <span>free</span> eBook we offer!</h3>
                  <br>
                  <p>Enter your email address and recieve this free eBook & to also subscribe to our weekly newsletter</p>
                  <br>
              </div>
            <!-- </div> -->
         
          <div class="row">
              <div class="bookImage col-lg-3 col-md-4"></div>

              <div class="col-lg-2 col-md-2">
                  <h5 class="title1"><i class="fa fa-heart-o"></i>&nbsp;Lorem ipsum dolor</h5>
                  <h5 class="title2"><i class="fa fa-paperclip"></i>&nbsp;Lorem ipsum dolor</h5>
                  <h5 class="title3"><i class="fa fa-envelope-o"></i>&nbsp;Lorem ipsum dolor</h5>
              </div>
          </div>
          <div class="row">

                  <form class="form-inline newslatter-form">
                      <div class="col-xs-8">
                      <div class="form-group">
                          <label class="sr-only" for="exampleInputEmail3">Email address</label>
                          <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Enter email">
                      </div>
              </div>
                      <div class="col-xs-4">
                      <div class="form-group">
                          <button type="submit" class="btn btn-warning submit-newsletter"><i class="fa fa-angle-right"></i>Submit</button>
                      </div>
                      </div>
                  </form>
          </div>
              </div>
            <div class="col-lg-2"></div>
        <!-- </div> -->
</div>

Comments