Карусель для отображения полной ширины экрана только для маленьких экранов

Question

У меня есть карусель, которая центрируется и занимает только половину экрана, добавляя это к классу "w-50". Когда браузер изменяет размер экрана на меньший, как мобильное устройство, я хочу, чтобы эта карусель занимала всю ширину экрана. Для этого я уверен, что мне нужно найти способ изменить это на «w-100», но я не уверен, как это сделать.

Я пытался поиграть с @media в CSS, но мне не повезло.

<div id="catalogueSelection">
        <div id="catalogueCarousel" class="carousel slide w-50" data-ride="carousel" data-interval="5000">
            <ol class="carousel-indicators">
                <li data-target="#catalogueCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#catalogueCarousel" data-slide-to="1"></li>
                <li data-target="#catalogueCarousel" data-slide-to="2"></li>
                <li data-target="#catalogueCarousel" data-slide-to="3"></li>
                <li data-target="#catalogueCarousel" data-slide-to="4"></li>
                <li data-target="#catalogueCarousel" data-slide-to="5"></li>
                <li data-target="#catalogueCarousel" data-slide-to="6"></li>
            </ol>
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img id="franceImage" class="d-block w-100" src="../images/france.jpg">
                    <div class="carousel-caption countryCaption">
                        <h2>France</h2>
                        <p>See Products</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img id="italyImage" class="d-block w-100" src="../images/italy.jpg">
                    <div class="carousel-caption countryCaption">
                        <h2>Italy</h2>
                        <p>See Products</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img class="d-block w-100" src="../images/spain.jpg">
                    <div class="carousel-caption countryCaption">
                        <h2>Spain</h2>
                        <p>See Products</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img id="lebanonImage" class="d-block w-100" src="../images/lebanon.jpg">
                    <div class="carousel-caption countryCaption">
                        <h2>Lebanon</h2>
                        <p>See Products</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img id="southAfricaImage" class="d-block w-100" src="../images/south_africa.jpg">
                    <div class="carousel-caption countryCaption">
                        <h2>South Africa</h2>
                        <p>See Products</p>
                    </div>
                </div>
                <div id="southAmericaImage" class="carousel-item">
                    <img class="d-block w-100" src="../images/south_america.jpg">
                    <div class="carousel-caption countryCaption">
                        <h2>South America</h2>
                        <p>See Products</p>
                    </div>
                </div>
                <div id="domesticImage" class="carousel-item">
                    <img class="d-block w-100" src="../images/united_states.jpg">
                    <div class="carousel-caption countryCaption">
                        <h2>Domestic</h2>
                        <p>See Products</p>
                    </div>
                </div>
            </div>
            <a class="carousel-control-prev" href="#catalogueCarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#catalogueCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

#catalogueCarousel {
    margin: auto;
    border: 3px solid;
    border-color: black;

}
.carousel-inner {

}
.carousel-item img {
    height: 500px; !important
    overflow: hidden;
    opacity: 0.9;   
    opacity: 0.8;       
}
.countryCaption h2 {
    color: red;
    font-family: 'Prosto One', cursive;
    opacity: 1; !important

}
.countryCaption p{
    color: darkred;
    font-weight: bold;
    font-family: 'Prosto One', cursive;
    font-size: 20px;
    opacity: 1; !important

}

Выше приведен фрагмент html-кода карусели, а также таблица стилей. Любые советы или идеи, которые помогут мне решить эту проблему, приветствуются.

Спасибо.

Answer 1

Вы можете попробовать использовать комбинацию медиазапросов и правила !important.Предполагая, что 768px является вашей мобильной точкой останова:

@media(max-width:768px){
  #catalogueCarousel {
    width: 100% !important;
  }
}

В качестве альтернативы вы можете использовать jQuery:

function resizeCarousel() {
  if($window.width() < 768) {
    $('#catalogueCarousel')
      .removeClass('w-50')
      .addClass('w-100');
  } else {
    $('#catalogueCarousel')
      .removeClass('w-100')
      .addClass('w-50');
  }
}
resizeCarousel();
$window.resize(resizeCarousel);

Answer 2

Вам просто нужно добавить медиа-запрос для небольшого устройства.Добавьте ниже CSS в таблицу стилей, я надеюсь, что это решит вашу проблему.Спасибо

@media only screen and (max-width: 768px) {
  #catalogueCarousel {
    width: 100% !important;
  }
}