0

When I resize my browser to a mobile size, I get a large amount of gap between both div's[Searcharea div and Steps div]. But, while in pc mode, there is no gap. I tried margin top and bottom but, I am not able to figure out the error. Please Help . Thanks. Below is the code.

HTML CODE:

<div class="searcharea col-md-12">

            <div class="head col-md-12 col-xs-12">
                <h1> Search for your own seat. </h2>
            </div>

            <div class="col-md-12 col-xs-12">
                <div class="input-group custom-search-input">
                  <input type="text" class="form-control">
                  <span class="input-group-btn">
                  <button class="btn btn-danger" type="button">
                  <span class="glyphicon glyphicon-search"></span> CLICK
                 </button>
                 </span>
                 </div><!-- /input-group -->
            </div>

    </div>     <!-- Search Bar ENDs --> 

    <div class="steps col-md-12 col-xs-12">
        <div class="find col-md-12">
            <h2 class="findhead">Finding Nearby ! </h2>
        </div>
    </div>

CSS:

.searcharea{
background-image: url(restback.jpg);
background-repeat: no-repeat;
background-size: 100%;
height: 600px;
margin-top: 0px;
}

.custom-search-input {
    margin:5%;
    width: 60%;
    margin-left: 20%;

}
.head{
color: #ffffff;
margin-top: 15%;

text-align: center;
}
.steps {
background-color: lightblue;
height: 700px;
margin-top: 0px;
}
.find{
text-align: center;
}
Siguza
  • 21,155
  • 6
  • 52
  • 89
Voodoo
  • 16
  • 5
  • It is not clear to me which part you are not happy with. Here is your [code](http://www.bootply.com/2fVnUTd7Iy), check fullscreen and mobile preview. – Deja Vu Jun 09 '15 at 16:57
  • @DejaVu Hey. I went on your link. So, once you open code play and check code, you will notice when you reduce the browser size to mobile size the distance between the searchbar div and steps div is increased. You can add a background color to searchbar div and check. please help if you can get rid of that space. Thanks a lot . – Voodoo Jun 09 '15 at 17:05
  • It has to increase, due to the fact that your `searcharea` and `steps` both have fixed height. Remove `height: 600px;` from your `searcharea` and see what happens. – Deja Vu Jun 09 '15 at 17:15
  • Have you ever heard about *collapsing margins*? It seems to me that this is actually a problem where collapsing of margins is unwanted (but still happens). – connexo Jun 09 '15 at 17:22
  • @DejaVu Hey,thank. The space has gone with your fix , but now my background image inside searchbar div disappears on reducing browser size. What should I do ? – Voodoo Jun 09 '15 at 17:22
  • @connexo Hey, I have already tried margin-bottom . Is their any other fix ? – Voodoo Jun 09 '15 at 17:24
  • So you do know what *collapsing margins* means? Check the fiddle in that question, it's only two divs with no content: http://stackoverflow.com/questions/28168552/inner-div-not-respecting-margin-top-relative-to-parent-div If the way it's displayed also surprises you, you should read on. Most frontend guys never run into this, or never notice they did. – connexo Jun 09 '15 at 17:26

1 Answers1

0

Problem is with your fixed height i.e. height: 600px;

/* CSS used here will be applied after bootstrap.css */

.searcharea {
  background-image: url('http://placehold.it/1200x600');
  background-repeat: no-repeat;
  background-size: 100% 100%; // Add
  min-height: 300px; // Add
}
.custom-search-input {
  margin: 0 auto; // Replaced
  width: 60%;
  padding-bottom: 5%; // Add
}
.head {
  color: #ffffff;
  margin-top: 15%;
  text-align: center;
}
.steps {
  background-color: lightblue;
  height: 700px;
  margin-top: 0px;
}
.find {
  text-align: center;
}

<div class="searcharea col-md-12">

  <div class="head col-md-12 col-xs-12">
    <h1> Search for your own seat. </h1>
  </div>

  <div class="col-md-12 col-xs-12">
    <div class="input-group custom-search-input">
      <input class="form-control" type="text">
      <span class="input-group-btn">
                  <button class="btn btn-danger" type="button">
                  <span class="glyphicon glyphicon-search"></span> CLICK
      </button>
      </span>
    </div>
    <!-- /input-group -->
  </div>

</div>
<!-- Search Bar ENDs -->

<div class="steps col-md-12 col-xs-12">
  <div class="find col-md-12">
    <h2 class="findhead">Finding Nearby ! </h2>
  </div>
</div>

Bootply

m4n0
  • 29,823
  • 27
  • 76
  • 89