I made a Carousel of several images next to each other that is not responsive on smaller screens

Asked

Viewed 75 times

-1

So I was putting together a project where I made a Carousel with vehicle brands where I use four images on each slide, which on the computer screen is right but when you go through the phone to view the site the images are one below the other, follows the code below remembering that I am new in the area so any error can say the will.

         <section class="marcas fundo_branco">
          <div class="container">
            <h2 class="tit"><strong>Principais Marcas Atendidas</strong></h2>
              <div class="col-lg-12">
                <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
                  <div  class="carousel-inner">
                    <div class="carousel-item active">
                      <div class="row">
                        <div class="col-lg-3">
                          <img src="imagens/imagens_marcas/ford.png" height="200px" !important alt="First slide">
                        </div>
                        <div class="col-lg-3">
                          <img src="imagens/imagens_marcas/cat.jpg" height="200px">
                        </div>
                        <div class="col-lg-3">
                          <img src="imagens/imagens_marcas/deere.jpg" height="200px">
                        </div>
                        <div class="col-lg-3">
                          <img src="imagens/imagens_marcas/iveco.jpg" height="200px">
                        </div>
                      </div>  
                    </div>
                    <div class="carousel-item">
                      <div class="row">
                        <div class="col-lg-3">
                          <img src="imagens/imagens_marcas/man.png" height="200px">
                        </div>
                        <div class="col-lg-3">
                          <img src="imagens/imagens_marcas/mercedez.png" height="200px">
                        </div>
                        <div class="col-lg-3">
                          <img src="imagens/imagens_marcas/new-holland.png" height="200px">
                        </div>
                        <div class="col-lg-3">
                          <img src="imagens/imagens_marcas/scania.jpg" height="200px">
                        </div>
                      </div>  
                    </div>
                  </div>
                </div>
              </div>
              <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Anterior</span>
              </a>
              <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Próximo</span>
              </a>
            </div>
          </div>         
        </section>
html css bootstrap-3

1 answer

0

Pass with the "col-lg-3" the "col-Xs-X". Ex.:

       class="col-xs-12 col-lg-3"

Also check if you’re adding the meta tag to the header:

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

Browser other questions tagged html css bootstrap-3

You are not signed in. Login or sign up in order to post.