如何在实现CSS中更改轮播项目的宽度

Question

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;
}

Answer 1

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

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