Bootstrap carousel space issues

Question

i'm developing a web page with the help of bootstrap and i have carousel area this carousel works quite good but whenever i added hidden-xs class to my carousel area slider disappears ok.But height of carousel area protect itself i mean if my carousel area 500px height when slider hidden in mobile slider disappear but 500px space is not dissappear ?

my-codes below;

<!--carousel area/slider alanı-->
  <div id="carousel-example-generic" class="carousel slide slider-area hidden-xs" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="sliders/temsili_1.jpg" alt="Aurum otelleri slider açıklaması">
        </div>
        <div class="item">
          <img src="sliders/temsili_2.jpg" alt="Aurum otelleri slider açıklaması">
        </div>
      </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
  <!--carousel area/slider alanı-bitti-->

could you help me ?

can you put any demo. How will anyone come to know your issue? — Ganesh Yadav, May 20 '15 at 12:43
can you add more of your code here? like the parent div of your carousel? — Coding Enthusiast, May 20 '15 at 12:55
@locateganesh here you are dude; http://content.anitur.com.tr/ftp-grafik/stackoverflow/ — yedincifirat, May 20 '15 at 12:56
pretty neat website and i think it is actually hidden, the space below is due to the position of your main title.. you might want to vertically align on mobile devices. — Coding Enthusiast, May 20 '15 at 13:05

score 0 · Answer 1 · edited May 23 '17 at 11:43

I took a look at the website link which is: your website. Tested it on mobile. The div is actually hidden and the space is due to the main title alignment which I suggest you vertically align on mobile devices using the media queries:

@media (max-width: 767px) {
    /*insert some styling here. you know how it is done :)*/
}

For vertical alignment of text in div you can refer to this Vertical align text in div - stackoverflow. The explanation and answers are pretty good.

Bootstrap widths are defined like this:

Extra small devices < 768px
Small devices >= 768px
Medium devices >= 992px
Large devices: >=1200px

Bootstrap carousel space issues

1 Answers1