Bootstrap carousel adjust height

Question

I'm new in Bootstrap and I have a question about carousel. I need to set a height of 700px on big screens (pcs) and a height of 500px for cell phones. How can I do it? I put this:

 @media (min-width: 320px){
    .carousel-caption p {
    margin-bottom: 20px;
    font-size: 20px;
    line-height: 1.4;
    }
    .carousel {
    height: 500px;
    margin-bottom: 60px;
    }

    .carousel .item {
    height: 500px;
    background-color: #777;
    }
    .carousel-inner > .item > img {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 500px;
    }

}

I wait for a response.

Thanks!

Answer 1

I can't test it right know, but if you want to have the 500px height in devices with a width smaller than 320px you're media query should be @media (max-height:320px) instead of @media (min-width:320px).

EDIT:

I tested it and this way works:

@media (max-width:320px){
  .carousel{
     height:50px;
   }
}

This way from resolutions that have width from 0 to 320, the .carousel class will have 50px of height.

If this solve your problem please don't forget to vote up and select this answer :)