Bootstrap carousel images too big in mobile

Question

I'm using bootstrap carousel on my site. When opened in a phone the images are huge. Take a look at www.nwberryfoundation.org to see what I mean. Is there a way to reduce the carousel in that view?

I've tried @media screen and (max-width: 400px) { .carousel { width: 75%; } }

Doesn't seem to make a difference.

Answer 1

Just use below code no need for media query and dont apply width instead try max-width

.carousel{
  max-width: 300px;  // u can changed it based on ur need or play with %
  margin: 0 auto;    // required to center div horizontally
}