krijg slideshows niet responsive

Hoi ik ben een site aan het bouwen samen met iemand anders. Ik ben de site nu responsive aan het maken met custom CSS en dit lukt aardig. Alleen is er op twee pagina’s een slideshow (pagina1 en pagina2 onderaan) en die lijk ik niet responsive te (kunnen) krijgen.

Ze lopen helemaal uit het beeld op een smartphone, of een tablet in landscape mode.

De code in het txt deel van de page luidt als volgt:
<div id="banner">[vc_images_carousel images="363,364,362,365" img_size="large" autoplay="yes" hide_pagination_control="yes" wrap="yes"]</div>

en de (custom) CSS luidt als volgt:

@media only screen and (max-width: 960px) { 
/* plaats hier de css code voor tablets in portrait mode */
#banner
{
width:82%;
}
}

@media only screen and (max-width: 767px) { 
/* plaats hier de css code voor smartphones in landscape mode */
#banner
{
width:86%;
}
}

@media only screen and (max-width: 479px) {
/* plaats hier de css code voor smartphones in portrait mode */
#banner
{
width:96%;
}
}

De slideshows lijken met Visual Composer gemaakt te zijn, ik zal het mijn klant (die overigens ook meehelpt) navragen.

Maar misschien kan nu al iemand zien hoe ik het wel responsive kan krijgen..?
Alvast bedankt!
Groet
Sasseke