Hi, I'm not a coder, but you can try this:
You need to add a new media request to the custom.css in the RESPONSIVE CSS section.
This is need for changing the height of the carousel when the size of the browser window change.
Already you have two media requests in the custom.css - @media (min-width: 40em) and @media (min-width: 62em)
Now these blocks look like this:
Code:
/* RESPONSIVE CSS
-------------------------------------------------- */
@media (min-width: 40em) {
/* Bump up size of carousel content */
.carousel-caption p {
margin-bottom: 1.25rem;
font-size: 1.25rem;
line-height: 1.4;
}
.featurette-heading {
font-size: 50px;
}
}
@media (min-width: 62em) {
.featurette-heading {
margin-top: 7rem;
}
}
And after making changes, they will look like this:
Code:
@media (min-width: 40em) {
/* Bump up size of carousel content */
.carousel-item > img {
height: 15rem;
}
.carousel-item {
height: 15rem;
}
.carousel-caption p {
margin-bottom: 1.25rem;
font-size: 1.25rem;
line-height: 1.4;
}
.featurette-heading {
font-size: 50px;
}
}
@media (min-width: 62em) {
.carousel-item > img {
height: 22rem;
}
.carousel-item {
height: 22rem;
}
.featurette-heading {
margin-top: 7rem;
}
}
I wrote a height size for an example (15rem and 22rem). Pick up the height yourself, so that the picture is not distorted.
I hope this helps you.