Styjun

I have a carousel that is centered and only takes half the screen by adding this to the class "w-50". When the browser resizes to a smaller screen, like a mobile device, I want that carousel to take up the whole width of the screen. To do this I'm sure I'll need to find a way to change that to "w-100", but I'm not sure how to go about doing that.

I have tried to play around with @media in CSS, but haven't had any luck.

<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

Above is a snippet of the carousel html code, as well as it's stylesheet.
Any tips or ideas to help me resolve this is appreciated.

Thank you.

You can try using a combination of media queries and the !important rule.
Assuming 768px is your mobile breakpoint:

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

Alternatavely you could use 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);

You just need add media query for small device. Add below CSS in style sheet i hope it'll resolve your issue. Thanks

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