CODEWITHSUNDEEP
csscarouselmaterialize
arunoday singh
arunoday singh

Reputation: 222

how to change width of carousel item in materialize css

i want to change the width and height of the carousel item.i somehow manage to change the height but unable to change its width.

<div class="carousel z-depth-5">
<div class="carousel">
<a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
<a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>
<a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a>
<a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a>
<a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a>
 </div>
    </div>

css 

.carousel-item img{
height: 400px;
width: 300px;
}

.carousel{
height: 700px;
}

Upvotes: 0

Views: 907

Answers (1)

metaldino21
metaldino21

Reputation: 326

It's possible the width is being overwritten by another css rule. Try this:

.carousel-item img{
height: 400px;
width: 300px !important;
}

Upvotes: 2

Related Questions