CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
awongCM
awongCM

Reputation: 927

Bootstrap Carousel to be stretched full width of the page and latched at the top of the page

enter image description here

Here, I have the carousel in the middle of the page and I want its width to be stretched to the full width of the page. Then its top left and right hand corners to be latched onto very top of the page.

And here's what I come up with the following css.

.carousel{
   position: absolute;
   margin-bottom: 20px;
   line-height:1;
   top:0;
   left:0;
   min-width:100%;
   min-height: 500px;
}

.carousel-inner{
   width: inherit;
}

.carousel-inner > .item > img{
   min-width: 100%;
}

The above will give me the results I want. But the problem I see with this result is that when you scrolling the page downwards, the carousel gets "dragged" down and it will eventually overlaps all the other elements of the page. This is the unwanted side effect and I'm trying to figure out what's the correct css property that will lock my carousel at the top of the page.

Any ideas what could that be?

PS: I'm using Bootstrap 2, not 3 - FYI.

Upvotes: 1

Views: 4551

Answers (2)

awongCM
awongCM

Reputation: 927

Ha!

I found out why all the above methods didn't work! As suggested by Khizer Najeeb's comments above, we suspected there's a div tag container somewhere that's caused this problem and he was right!

In my front-page.php file ( as I built my Bootstrap on top of Wordpress), I found the following code.

<?php get_header(); ?>

   <?php include('carousel.php'); ?>

   <div id="wrap">         
     <div id="main" class="container">

     <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

     <?php the_content(); ?>

     <?php endwhile; else: ?>
     <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
     <?php endif; ?>

     </div><!-- .container -->
   </div><!-- #wrap -->
<?php get_footer(); ?>

What happens was, originally the "wrap" and "main" divs were wrapping around the include carousel.php line. I didn't think at the time this is main culprit from getting my carousel displayed in the format I wanted until I found this link. http://bootply.com/59900# and tested my css code bit by bit till I learned my carousel needed to stay outside the boundary of the my div tags..

And presto! All fixed and taken care of!

What a major relief!

Upvotes: 1

CRABOLO
CRABOLO

Reputation: 8793

.carousel{
   position: absolute;
   margin-bottom: 20px;
   line-height:1;
   top:0;
   left:0;
   min-width:100%;
   min-height: 500px;
   max-height: 600px; // ADD a max height, so it doesn't keep increasing when you scroll down
}

Upvotes: 3

Related Questions