cards within carousel-inner is not responsive

Question

I have made carousel with 12 cards each side has 6 cards it's working fine with larger screens but I am unable to make it responsive for mobile screens I have tried every option to achieve responsiveness but unable to achieve results.Here is the image how it is behaving in mobile screens.Carousel with cards.I have made my own carousel controls and I want that controls to be use in responsiveness. I have tried using col-sm-2 thing as well

.card-icon {
    position: absolute;
    top: 50%;
    right: -39px;
    transform: translateY(-50%);
  }
   .carousel-inner .active {
    display: block;
  }
  .carousel-inner-one{
    height: 200px;
  }

<div class="carousel-container">
                    <div id="carouselExampleControls" class="carousel carousel-dark slide" data-bs-ride="carousel">
                      <div class="carousel-inner-one">
                        <div class="carousel-item active">
                          <div class="row">
                            <div class="col-sm-1 col-md-6 my-4 d-flex">
                              <div class="card">
                                <div class="card-image">
                                  <img src="./assets/images/burger.jpg" class="card-img-top" alt="Card Image 1">
                                </div>
                                  <div class="card-body text-center">
                                    <h5 class="card-title">Buffalo Wings</h5>
                                  </div>   
                              </div>
                            </div>
                            <div class="col-lg-2 col-sm-1 col-md-6 my-4">
                              <div class="card">
                                <div class="card-image">
                                  <img src="./assets/images/burger.jpg" class="card-img-top" alt="Card Image 1">
                                </div>
                                  <div class="card-body text-center">
                                  <h5 class="card-title">Buffalo Wings</h5>
                                </div>
                              </div>
                            </div>
                            <div class="col-xl-2 col-sm-1 col-md-6 my-4">
                              <div class="card">
                                <div class="card-image">
                                  <img src="./assets/images/burger.jpg" class="card-img-top" alt="Card Image 1">
                                </div>
                                  <div class="card-body text-center">
                                  <h5 class="card-title">Buffalo Wings</h5>
                                </div>
                              </div>
                            </div>
                            <div class="col-xl-2 col-sm-1 col-md-6 my-4">
                              <div class="card">
                                <div class="card-image">
                                  <img src="./assets/images/burger.jpg" class="card-img-top" alt="Card Image 1">
                                </div>
                                <div class="card-body text-center">
                                  <h5 class="card-title">Buffalo Wings</h5>
                                </div>
                              </div>
                            </div>
                            <div class="col-xl-2 col-sm-1 col-md-6 my-4">
                              <div class="card">
                                <div class="card-image">
                                  <img src="./assets/images/burger.jpg" class="card-img-top" alt="Card Image 1">
                                </div>
                                <div class="card-body text-center">
                                  <h5 class="card-title">Buffalo Wings</h5>
                                </div>
                              </div>
                            </div>
                            <div class="col-xl-2 col-sm-1 col-md-6 my-4 d-flex">
                              <div class="card">
                                <div class="card-image">
                                  <img src="./assets/images/burger.jpg" class="card-img-top" alt="Card Image 1">
                                </div>
                                  <div class="card-body text-center">
                                  <h5 class="card-title">Buffalo Wings</h5>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                          <div class="carousel-item">
                            <div class="row">
                              <div class="col-xl-2 col-md-6 my-4 d-flex">
                                <div class="card">
                                  <div class="card-image">
                                    <img src="./assets/images/burger.jpg" class="card-img-top" alt="Card Image 1">
                                  </div>
                                    <div class="card-body text-center">
                                    <h5 class="card-title">Buffalo Wings</h5>
                                  </div>
                                </div>
                              </div>
                              <div class="col-xl-2 col-md-6 my-4 d-flex">
                                <div class="card">
                                  <div class="card-image">
                                    <img src="./assets/images/burger.jpg" class="card-img-top" alt="Card Image 1">
                                  </div>
                                    <div class="card-body text-center">
                                    <h5 class="card-title">Buffalo Wings</h5>
                                  </div>
                                </div>
                              </div>
                              <div class="col-xl-2 col-md-6 my-4 d-flex">
                                <div class="card">
                                  <div class="card-image">
                                    <img src="./assets/images/burger.jpg" class="card-img-top" alt="Card Image 1">
                                  </div>
                                    <div class="card-body text-center">
                                    <h5 class="card-title">Buffalo Wings</h5>
                                  </div>
                                </div>
                              </div>
                              <div class="col-xl-2 col-md-6 my-4 d-flex">
                                <div class="card">
                                  <div class="card-image">
                                    <img src="./assets/images/burger.jpg" class="card-img-top" alt="Card Image 1">
                                  </div>
                                    <div class="card-body text-center">
                                    <h5 class="card-title">Buffalo Wings</h5>
                                  </div>
                                </div>
                              </div>
                              <div class="col-xl-2 col-md-6 my-4 d-flex">
                                <div class="card">
                                  <div class="card-image">
                                    <img src="./assets/images/burger.jpg" class="card-img-top" alt="Card Image 1">
                                  </div>
                                    <div class="card-body text-center">
                                    <h5 class="card-title">Buffalo Wings</h5>
                                  </div>
                                </div>
                              </div>
                              <div class="col-xl-2 col-md-6 my-4 d-flex">
                                <div class="card">
                                  <div class="card-image">
                                    <img src="./assets/images/burger.jpg" class="card-img-top" alt="Card Image 1">
                                  </div>
                                    <div class="card-body text-center">
                                    <h5 class="card-title">Buffalo Wings</h5>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="icon">
                            <button class="btn btn-primary button" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev"><i class="fas fa-chevron-left"></i></button>
                          </div>    
                          <div class="card-icon">
                            <button class="btn btn-primary button" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
                              
                                <i class="fas fa-chevron-right"></i>
                              
                              
                            </button>
                          </div>
                    </div>
                  </div>
                </div>

_"Here is the image how it is behaving in mobile screens"_ - and instead, it is supposed to behave _how_, exactly ...? — CBroe, Jul 27 '23 at 10:44

Md. Rakibul Islam · Answer 1 · 2023-07-27T12:39:52.417

I wrote the Bootstrap column classes correctly. Now it is responsive. I had to use some dummy images for testing. You can change them.

  .card-icon {
  position: absolute;
  top: 50%;
  right: -39px;
  transform: translateY(-50%);
  /* updated code for hiding horizontal overflow */
  right: 0;      
}
.carousel-inner .active {
  display: block;
}
.carousel-inner-one{
  height: 200px;
}

/* updated code for hiding horizontal overflow */
.carousel-container{
  overflow: hidden;
}

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  
<div class="carousel-container">
  <div id="carouselExampleControls" class="carousel carousel-dark slide" data-bs-ride="carousel">
    <div class="carousel-inner-one">
      <div class="carousel-item active">
        <div class="row">
          <div class="col-sm-12 col-md-6 col-lg-4 col-xl-2 my-4">
            <div class="card">
              <div class="card-image">
                <img src="https://picsum.photos/600/600?random=1" class="card-img-top" alt="Card Image 1">
              </div>
                <div class="card-body text-center">
                  <h5 class="card-title">Buffalo Wings</h5>
                </div>   
            </div>
          </div>
          <div class="col-sm-12 col-md-6 col-lg-4 col-xl-2 my-4">
            <div class="card">
              <div class="card-image">
                <img src="https://picsum.photos/600/600?random=2" class="card-img-top" alt="Card Image 1">
              </div>
                <div class="card-body text-center">
                <h5 class="card-title">Buffalo Wings</h5>
              </div>
            </div>
          </div>
          <div class="col-sm-12 col-md-6 col-lg-4 col-xl-2 my-4">
            <div class="card">
              <div class="card-image">
                <img src="https://picsum.photos/600/600?random=3" class="card-img-top" alt="Card Image 1">
              </div>
                <div class="card-body text-center">
                <h5 class="card-title">Buffalo Wings</h5>
              </div>
            </div>
          </div>
          <div class="col-sm-12 col-md-6 col-lg-4 col-xl-2 my-4">
            <div class="card">
              <div class="card-image">
                <img src="https://picsum.photos/600/600?random=4" class="card-img-top" alt="Card Image 1">
              </div>
              <div class="card-body text-center">
                <h5 class="card-title">Buffalo Wings</h5>
              </div>
            </div>
          </div>
          <div class="col-sm-12 col-md-6 col-lg-4 col-xl-2 my-4">
            <div class="card">
              <div class="card-image">
                <img src="https://picsum.photos/600/600?random=5" class="card-img-top" alt="Card Image 1">
              </div>
              <div class="card-body text-center">
                <h5 class="card-title">Buffalo Wings</h5>
              </div>
            </div>
          </div>
          <div class="col-sm-12 col-md-6 col-lg-4 col-xl-2 my-4">
            <div class="card">
              <div class="card-image">
                <img src="https://picsum.photos/600/600?random=6" class="card-img-top" alt="Card Image 1">
              </div>
                <div class="card-body text-center">
                <h5 class="card-title">Buffalo Wings</h5>
              </div>
            </div>
          </div>
        </div>
      </div>
        <div class="carousel-item">
          <div class="row">
            <div class="col-sm-12 col-md-6 col-lg-4 col-xl-2 my-4">
              <div class="card">
                <div class="card-image">
                  <img src="https://picsum.photos/600/600?random=7" class="card-img-top" alt="Card Image 1">
                </div>
                  <div class="card-body text-center">
                  <h5 class="card-title">Buffalo Wings</h5>
                </div>
              </div>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-4 col-xl-2 my-4">
              <div class="card">
                <div class="card-image">
                  <img src="https://picsum.photos/600/600?random=8" class="card-img-top" alt="Card Image 1">
                </div>
                  <div class="card-body text-center">
                  <h5 class="card-title">Buffalo Wings</h5>
                </div>
              </div>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-4 col-xl-2 my-4">
              <div class="card">
                <div class="card-image">
                  <img src="https://picsum.photos/600/600?random=9" class="card-img-top" alt="Card Image 1">
                </div>
                  <div class="card-body text-center">
                  <h5 class="card-title">Buffalo Wings</h5>
                </div>
              </div>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-4 col-xl-2 my-4">
              <div class="card">
                <div class="card-image">
                  <img src="https://picsum.photos/600/600?random=10" class="card-img-top" alt="Card Image 1">
                </div>
                  <div class="card-body text-center">
                  <h5 class="card-title">Buffalo Wings</h5>
                </div>
              </div>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-4 col-xl-2 my-4">
              <div class="card">
                <div class="card-image">
                  <img src="https://picsum.photos/600/600?random=11" class="card-img-top" alt="Card Image 1">
                </div>
                  <div class="card-body text-center">
                  <h5 class="card-title">Buffalo Wings</h5>
                </div>
              </div>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-4 col-xl-2 my-4">
              <div class="card">
                <div class="card-image">
                  <img src="https://picsum.photos/600/600?random=12" class="card-img-top" alt="Card Image 1">
                </div>
                  <div class="card-body text-center">
                  <h5 class="card-title">Buffalo Wings</h5>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="icon">
          <button class="btn btn-primary button" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev"><i class="fas fa-chevron-left"></i></button>
        </div>    
        <div class="card-icon">
          <button class="btn btn-primary button" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">              
              <i class="fas fa-chevron-right"></i>            
          </button>
        </div>
  </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

I have added media queury for width less than equals 700px there I want one card per slider to appear or 2 max but it is overflowing section — Hania Hafeez Khan, Jul 27 '23 at 11:46
OK, I have added some more CSS rules to hide the horizontal overflow and positioned the control button. You can see here it is fully responsive right now and shows one card per row when less than equals to 700px width. No overflow is seen. Now, how you apply these codes within some other codes, I don't know about that as those codes are not here to check. — Md. Rakibul Islam, Jul 27 '23 at 12:45
One possible reason could be the container in which you are putting these codes that container doesn't have the full width of the screen. In that case, assign ```.full-width-div {position: absolute; width: 100%; left: 0; }``` class to that container so that it gets the 100% of the screen width. — Md. Rakibul Islam, Jul 27 '23 at 13:01
cards are vertically overflowing when i check on screen 400px — Hania Hafeez Khan, Jul 27 '23 at 13:05
I have a whole home page and that slider is overlapping with other sections — Hania Hafeez Khan, Jul 27 '23 at 13:06
These cards are ```static``` positioned elements. So these should not overlap with any other sections vertically unless those sections have ```position: absolute```. If that's the case, then wrap those sections with a ```position: relative``` container and it will work. — Md. Rakibul Islam, Jul 27 '23 at 13:15

cards within carousel-inner is not responsive

1 Answers1