CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Kevin Wei
Kevin Wei

Reputation: 165

Bootstrap: Too Much Spacing (Not Responsive)

I'm trying to learn bootstrap and built a website with a video background on top and text below it. When I reduce the desktop size screen to one of mobile size, a large gap appears in between the video and body text. Any help would be helpful in my pursuit to learn boostrap! Thanks so much.

Picture of my problem

I suspect it's a padding or margin problem? But why would it expand more when I make the browser window smaller?

HTML:

<body>
    <div class = "container-fluid">
        <div class = "row">

        <div class = "header-container">
            <div class = "video-container">
                <div align="center" class="embed-responsive embed-responsive-16by9">
                      // video code removed (for succinctness)
                </div> <!-- video responsiveness -->
            </div> <!-- video-container -->

            <div class = "col-md-12 text-center">
                <h3> 
                    TEXT
                </h3>
            </div>

            </div> <!-- header-container -->
            </div> <!-- row -->
        </div> <!-- container -->

    <section id="services">
        <div class="row">
             <div class="col-sm-3 col-sm-offset-2" id="red">
                  <h2 class="text-center">
                  Services
                  </h2>

                  <p class="text-justify">
                    // BODY TEXT removed (for succinctness)
                  </p>
             </div>

CSS:

.header-container {
    width: 100%;
    height: 700px;
    border-left: none;
    border-right: none;
    position: relative;
    padding: 0px;
    margin: 0px;
}

.video-container {
    position: absolute;
    top: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    z-index: -1;
}

video { max-width: 100%; min-width: 100%; min-height: 100%; }

#services{
    background-color: white;
    height: 25px;
}

Upvotes: 1

Views: 1799

Answers (4)

justincron
justincron

Reputation: 232

You'll probably have to use media queries to adjust the container .head-container size.

Try something like:

@media (max-width: 1170px) {
    .header-container {
        height: 250px;
    }
}

Upvotes: 1

bobleeswagger
bobleeswagger

Reputation: 103

This does not appear to be a padding or margin issue.

You have added some custom CSS that specifies an explicit height on your header-container class, i.e., 700px. At the same time, however, You are placing the video in a responsive container by specifying Bootstrap's embed-responsive class, etc.

This essentially means that the video, IFRAME, or whatever you put within the responsive container will respond to the size of the screen, i.e., as the window's dimensions decrease, so do the content's. The actual height of what is in the container will be shorter as the screen gets smaller, probably a lot shorter than 700px; how short, just depends on the aspect ratio. You could enforce a min-height, specify auto or simply alter the design to flow more naturally, simply applying bottom/top margin as appropriate.

Bootstrap: Responsive embed

Upvotes: 3

Virendra Nagda
Virendra Nagda

Reputation: 658

change the height in your header-container css class.

height: 700px;

change

height: auto;

Upvotes: 1

NAITIK GADA
NAITIK GADA

Reputation: 39

It may happen because you are already using the bootstrap class embed-responsive and again defining styles for the video tag. Try removing the styles for the video tag or just the min-height tag. That may be causing the problem

Upvotes: 1

Related Questions