0

This is my first question in this site, I made a simple website with bootstrap carousel. The result looks fine on desktop view but when i resized/use a mobile phone view, the carousel moves off screen and it looks like this
http://i68.tinypic.com/2m67atd.jpg
I've been trying to do anything such as turning the carousel into a full screen carousel and resizing the footer height but it didn't solve my problems at all.
here is the code I have for my carousel

    <!-- /// START SLIDER SECTION /// -->   
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li class="active" data-target="#myCarousel" data-slide-to="2"></li>
  </ol>

 <!-- Wrapper for slides -->
  <div class="carousel-inner">
<div class="item active">
  <img src="img/main-image.jpg" class="img-responsive center-block" style="max-width:1366px"  alt="...">
  <div class="carousel-caption">
    Text for slider 1
  </div>
</div>

<div class="item">
  <img src="img/main-image2.jpg" class="img-responsive center-block" style="max-width:1366px"  alt="...">
  <div class="carousel-caption">
  Text for slider 2
  </div>
</div>

<div class="item">
  <img src="img/main-image3.jpg" class="img-responsive center-block" style="max-width:1366px"  alt="...">
  <div class="carousel-caption">
  Text for slider 3
  </div>
</div>
</div>

Thank you for the help.

jo jo
  • 1
  • 2
  • It is the same problem with this [link] (http://stackoverflow.com/questions/18424798/twitter-bootstrap-3-how-to-use-media-queries) – Ting Shun Ng Feb 09 '16 at 22:51
  • Possible duplicate [here] (http://stackoverflow.com/questions/35215096/bootstrap-carousel-with-mobile-size) – OYRM Feb 09 '16 at 22:57
  • @OYRM thank you very much. Now it worked! I missed that one and got myself more trouble earlier.. – jo jo Feb 10 '16 at 01:09

0 Answers0