Как изменить размер материализованной карусели карт - PullRequest
0 голосов
/ 12 июля 2020

Я создал карусель карточек, которая отлично смотрится на большом экране, но когда я изменяю размер браузера, она уменьшается вдвое, пожалуйста, посмотрите на пример ниже: -

Исходный размер: - enter image description here

Browser resize:-

image

.carousel .carousel-item {
width: 30% !important;

}
.carousel {
max-width: 100%;
height: auto;
width: auto;
}

.card{ 
border-radius: 8px; 
position: relative !important;
right: 40px !important;
width:28vw;

}
<div class="carousel carousel-slider center">
         <div class="carousel-item">
            <div class="card">
              <div class="card-image">
                <img src="https://i.ibb.co/Vp7q9CN/Daca.gif">
              </div>
                <div class="card-content">
                  <span class="card-title activator grey-text text-darken-4">Reveal<i class="material-icons right">more_vert</i></span>
                </div>
                 <div class="card-reveal">
                     <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
                     <p>Here is some more information about this product that is only revealed once clicked on.</p>
                </div>
            </div>
         </div>
         <div class="carousel-item">
            <div class="card">
              <div class="card-image">
                <img src="https://i.ibb.co/Vp7q9CN/Daca.gif">
              </div>
                <div class="card-content">
                  <span class="card-title activator grey-text text-darken-4">Reveal<i class="material-icons right">more_vert</i></span>
                </div>
                <div class="card-reveal">
                     <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span>
                     <p>Here is some more information about this product that is only revealed once clicked on.</p>
                </div>
            </div>
         </div>

Как я могу сделать его такого же размера при изменении размера окна браузера или просто сделать его подходящим размером, но не вырезать.

Это новый вид в полноэкранном режиме.

введите описание изображения здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...