Question

On my website I have a hero unit where a form is being displayed. Behind the form a number of images are being displayed one after another with a smooth fade.

I’m trying the layer the div with the form on top of the div with the background images by setting the container div to position: relative and the div that holds the images to position: absolute. Something like this:

<div class="container">
   <div class="row">
      <div class="hero"
         <div class="images">
            <img ... />
         </div>

         <div class="form">

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

The container and row classes come from Bootstrap. My classes have the following styles:

.hero {
   position: relative;
}

.images {
   position: absolute;
}

This works. However, when I start to resize my browser window and the responsive nature kicks in, the images inside the images div do not resize anymore but stay the same fixed size.

How can have this type of div layer in Bootstrap while still make full use of Bootstrap’s responsive nature?

Answer 1

<div class="container">
   <div class="row">
      <div class="hero custom-image"
         <div class="form">
         </div>
      </div>
   </div>
</div>

Maybe you can add .custom-image CSS. Set the .custom-image width in percentage %.

Another possibilities, add media queries in your custom CSS:

/* Landscape phone to portrait tablet */

@media (max-width: 767px) {
.custom-image{
width:50%;
}
}

/* Landscape phones and down */

@media (max-width: 480px) {
.custom-image{
width:50%;
}
}