CODEWITHSUNDEEP
laraveltwitter-bootstrapbootstrap-4carouselsaas
Ali Ghasemzadeh
Ali Ghasemzadeh

Reputation: 169

How adjust bootstrap carousel height?

This is my website:https://pcshiraz.ir
My carousel image height is not responsive, I can not find solution.

Upvotes: 2

Views: 3206

Answers (5)

Blackmask
Blackmask

Reputation: 191

Hi you can add this Stylesheet i've tried in your website with inspect element it's worked!

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .carousel-inner {
    height: 400px;
}

.carousel-item, .carousel-item img {
    height: 400px;
  width:100%;
}

} 

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 767px) {
    .carousel-inner {
    height: 160px;
}

.carousel-item, .carousel-item img {
    height: 160px;
  width:100%
}
}

Here is Result

enter image description here

Upvotes: 2

Vytenis Ščiukas
Vytenis Ščiukas

Reputation: 473

Just add width: 100% on your slide <img /> tag. If you are using bootstrap use w-100 class or smth. But be aware that SEO will kick your ass for shrinking images like that, you might want to use several images and show them dependent on screen size.

Upvotes: 0

Jorn Barkhof
Jorn Barkhof

Reputation: 264

Try using viewheight,

.carousel{
    min-height: 100vh;
    height: 100vh;
}

Viewheight takes % of screen view. 50vh means it will take up 50% of your display. 100vh will take up 100% of your display.

Upvotes: 0

Fischbrot
Fischbrot

Reputation: 828

You need to use 

.carousel {
   min-height: auto;
}

or try using 

.carousel {
   min-height: 100%;
}

Upvotes: 0

Bora.Ozgur
Bora.Ozgur

Reputation: 65

You can't handle the problem with carousel-item active . You can try col-md-6 or col-sm-12 instead of carousel-item active. In this way height will be autosized.

Upvotes: 0

Related Questions