Why is excessive whitespace generated in Bootstrap 3?

When the viewport is resized smaller, excessive whitespace appears between the slider and line of text. I don't see what is causing this except it appears to relate to the font-size in the @media tags. I have temporary set all the margins:0 but the problem persists. I'm hoping someone can through some light on this.

I couldn't see how to boil this down to  jsFiddle so please go to a beta site at - www.pricelearman.com/clients/serenaconstruction. Help would be greatly appreciated
dlearman1Asked:
Who is Participating?
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I don't think it is a good idea to set heights like this.  If it was 2005 and sites were still pretty much a static width that would probably work.

Change
#homeSlider {
  display: block;
  padding-top: 1.8rem;
  width: 100%;
  height: 46.4rem;
}

Open in new window

to
#homeSlider {
  display: block;
  padding-top: 1.8rem;
  width: 100%;
/*  height: 46.4rem;*/
}

Open in new window

Try using margin or padding to add space although if you are using the row class with with child divs having col-xx-xx all of this should take care of itself.  I think when you try and force something in one place, you start a chain reaction that is not always easy to figure out.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.