Deniss Muntjans Deniss Muntjans - 4 months ago 14
CSS Question

How to scale carousel when you resize browser size?

I have got a Bootstrap carousel with 3 images (480x320px). Width of carousel itself set to 480px. How to scale carousel when you resize browser size?

.carousel{
width: 480px;
margin: auto;
}

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
width: 100%;
margin: auto;
}


Thanks!

Answer

You need to make the width of your .carousel class as 100%..

You need to make the below change to your CSS,

.carousel{
    width: 100%;
    margin: auto;
}

.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
    width: 100%;
    margin: auto;
}

However if you want keep them at 480x320px initially and want to handle them while the browser is getting resized, then you will need to go for media queries.

/* For devices which are smaller than 960 pixels */
@media only screen and (max-width: 959px) {
   //Write your CSS here.
}

/* For Tablets */
@media only screen and (min-width: 768px) and (max-width: 959px) {
   //Write your CSS here.
}

/* For all mobiles */
@media only screen and (max-width: 767px) {
   //Write your CSS here.
}

/* Mobile Landscape Size to Tablet Portrait  */
@media only screen and (min-width: 480px) and (max-width: 767px) {
   //Write your CSS here.
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
   //Write your CSS here.
}

Hope this helps!