Bootstrap is fixing height in header - html

Question

I´m a designer with some coding skills, but far from being a programmer. Currently I´m working in a website based on a Bootstrap template, doing good enough except an issue that is driving me nuts: apparently Bootstrap´s CSS is overriding the site CSS, adding a fixed head in the index.html header, which contains a div that contains an image carousel.
Displaying the site in small devices (tablets and cell phones), the carousel hides properly using "hidden-xs" and "hidden-xm" classes, but the header remains with a fixed height of 929px as Element Inspector shows, generating a very tall empty space before the next section.
Below you´ll find the header code, including carousel:
<header id="intro">
<!-- CAROUSEL STARTS -->
<div id="myCarousel" class="carousel slide hidden-xs hidden-xm" data-ride="carousel" data-interval="2000" style="border:1px solid red;">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="d-block img-fluid" src="img/header-01.jpg" align="left" alt="Slide 01">
<!-- <div class="carousel-caption">
<p>El conocimiento es libertad</p>
</div> -->
</div>
<div class="item">
<img class="d-block img-fluid" src="img/header-02.jpg" alt="Slide 02">
<!-- <div class="carousel-caption">
<p>El respeto a sí mismo</p>
</div> -->
</div>
<div class="item">
<img class="d-block img-fluid" src="img/header-03.jpg" alt="Slide 03">
<!-- <div class="carousel-caption">
<p>El respeto a los demás</p>
</div> -->
</div>
<div class="item">
<img class="d-block img-fluid" src="img/header-04.jpg" alt="Slide 04">
<!-- <div class="carousel-caption">
<p>Jardín - Primaria - Secundaria</p>
</div> -->
</div>
<div class="item">
<img class="d-block img-fluid" src="img/header-05.jpg" alt="Slide 05">
<!-- <div class="carousel-caption">
<p>El conocimiento es libertad</p>
</div> -->
</div>
<div class="item">
<img class="d-block img-fluid" src="img/header-06.jpg" alt="Slide 06">
<!-- <div class="carousel-caption">
<p>El respeto a sí mismo</p>
</div> -->
</div>
<!-- Wrapper for slides ENDS -->
</div>
<!-- CAROUSEL ENDS -->
</div>
</header>
And a couple of screenshots:
Home page full size (index.html)
Home page small devices width

Answer 1

Try putting this in your CSS file
#intro {
height: auto !important;
}
This should override the default height pixel.
If you want to have the fullscreen image, then write like this
#intro {
height: 100vh !important;
}
Hope this fixes your problem.