Responsive does not work right

Question

Responsive does not work right

Asked 7 years ago

Viewed 245 times

0

I put 3 images with links at the beginning of the site, I put to be responsive, but when I lower the screen it gets all messed up. And I need the images to be in the center of the screen, one side of the other, and when the screen goes down, they just keep on one side of the other.

<div class="row">

        <div class="col-xs-4 col-md-4 col-sm-4">
            <ul>
              <li class="lipostagem"><a href="PostagemTeste.html"><img class="img2 img-responsive" src="img/azul/teste.png" alt="Sucesso"> <span class="post">Postagem</span></a></li>
            </ul>
        </div>

        <div class="col-xs-4 col-md-4 col-sm-4">
            <ul>
              <li class="liviagem"><a href="#"><img class="img2 img-responsive" src="img/cinza/cinza1.png" alt="Sucesso"><span class="viagem">Viagem</span></a></li>
            </ul>
        </div>

        <div class="col-xs-4 col-md-4 col-sm-4">
            <ul>
              <li class="lientregue"><a href="EntregueCerto.html"><img class="img2 img-responsive" src="img/cinza/cinza1.png" alt="Sucesso"><span class="entregue">Entregue</span></a></li>
            </ul>
        </div>

</div>

CSS:

    .lipostagem{

    left: 86%;
    position: relative;
}

.liviagem{
  /*position: relative;
  left: 120%;*/

}

.lientregue{
position: relative;
right: 73%;

}

2 answers

3

col- should always be the son of .row, This would be correct in Bootstrap:

<div class="row">
      <div class="col-xs-4 col-md-4 col-sm-4">
            ...
      </div>
</div>

And within ul can only use li, this would be right and li must be the son of ul:

<ul>
    <li>....</li>
    <li>....</li>
    <li>....</li>
</ul>

ie you have many problems in your code, the way it affects the behavior of Bootstrap and why it does not work.

Documentation of the Grid system:

v3: https://getbootstrap.com/docs/3.3/css/#grid-example-Fluid

v4: http://getbootstrap.com/docs/4.0/layout/grid/

Corrected code

I switched the img-responsive by a class of its own and to remove the spacing add this:

.nospace > [class*=" col-"],
.nospace > [class^="col-"] {
   padding: 0 !important;
   margin: 0 !important;
}

.nospace > [class*=" col-"] .img,
.nospace > [class^="col-"] .img
{
  display: block;
  width: 100%;
}

Example in Bootply: https://www.bootply.com/IjaKulKqgI

*{
    font-family: 'Lato', sans-serif;
    font-weight: 300;
}

body{

    padding-top: 50px;
    background: #f2f2f2;
      overflow: hidden;
}

.nospace > [class*=" col-"],
.nospace > [class^="col-"] {
   padding: 0 !important;
   margin: 0 !important;
}

.nospace > [class*=" col-"] .img,
.nospace > [class^="col-"] .img
{
  display: block;
  width: 100%;
}
/*LOGIN*/

.form-login{
    max-width: 350px;
    margin-left: auto;
    margin-right: auto;
    padding: 10px;
    border-radius: 10px;
    background: #eee;
}

/*FIM LOGIN*/

.post:hover,
.entregue:hover,
.viagem:hover{
    color: #00497f;
}
.post:focus,
.entregue:focus,
.viagem:focus{
    color: #00497f;
}


/*.img1{
    float: right;
}*/
/*.img2{
    float: none;
}
.img3{
    float: right;
}*/

.flex-centralizado {
  display: flex;
  justify-content: center;
}

li{

    list-style-type: none;
}

/*
.viagem{
    float: left;
    padding-bottom: 0.625em;
    padding-top: 0.625em;
}
*/
.entregue,
.viagem{
    float: left;
    padding-bottom: 0.625em;
    padding-top: 0.625em;
}
.post{
    float: left;
    padding-bottom: 0.625em;
    padding-top: 0.625em;
}
.lipostagem{

    left: 86%;
    position: relative;
}

.liviagem{
  position: relative;
  left: 120%;

}

.lientregue{
position: relative;
right: 73%;

}


/*#buscar-postagem{
    left: 76%;

    position: static;
}
#buscar-viagem{
    float: left;

    position: static;

}
#buscar-entregue{

    right: 64%;
    position: static;

}*/



.entregue,
.post,
.viagem{
    color: #9b9b9b;

}



/*
.container{
    width: 50%;
    height: 100%;
    margin: 0 auto;

}
*/
section{
    margin: 2em 0;
    overflow: hidden;
}
/*width: 50%;*/
.center{
    left: 25%;

    position: relative;
    align-items: center;
}
/*
.tabela{
    width: 30%;
    position: relative;
    right: 1%;
}

.table_one{
    width: 10%;
    position: relative;
    left: 40%;
}

#table_two{
    position: relative;
    left: -15%;
    width: 20%;
}

.Table_Entregue{
  position: relative;
  left: -5px;
}

#test{
  padding: 1%;
  width: 40%;
}
.cor{
  background-color: ;
}
.um{
  position: relative;
  width: 100%;
  /*left: 15%;*/
/*}*/

td{
  font-weight:bold;
}

/*.hello{
  position: relative;
  width: 50%;
  left: 40%;
}*/
/*.status{
  width: 10%;
}*/
th{
  width: 20%;
}
/*@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}*/

/*.teste{
  float: left;
}*/


/* primeira imagem: https://forum.imasters.com.br/uploads/monthly_2017_11/teste.png.b6f5fec47f6928c3deb248244f50f8a2.png */
/*Segunda e ultima: https://forum.imasters.com.br/uploads/monthly_2017_11/cinza1.png.37adeed1167239d1681b644c01203ba6.png */

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">


<div class="container">
        <div class="row nospace">

            <div class="col-xs-4 col-md-4 col-sm-4">
                <a href="PostagemTeste.html">
                    <img class="img" src="https://auto.ndtvimg.com/car-images/medium/ferrari/gtc4lusso/ferrari-gtc4lusso.jpg?v=11" alt="Sucesso"> <span class="post">Postagem</span>
                </a>
            </div>

            <div class="col-xs-4 col-md-4 col-sm-4">
              <a href="#">
                  <img class="img" src="https://auto.ndtvimg.com/car-images/medium/ferrari/gtc4lusso/ferrari-gtc4lusso.jpg?v=11" alt="Sucesso"><span class="viagem">Viagem</span>
              </a>
          </div>

            <div class="col-xs-4 col-md-4 col-sm-4">
                <a href="EntregueCerto.html">
                    <img class="img" src="https://auto.ndtvimg.com/car-images/medium/ferrari/gtc4lusso/ferrari-gtc4lusso.jpg?v=11" alt="Sucesso"><span class="entregue">Entregue</span>
              </a>
            </div>

    </div>
    </div>



    <div class="container">
      <div class="table-responsive">
          <table class="table" width="100px" align="center">
              <thead>
                  <tr>

                        <th class="cor">Status:</th>

                  </tr>
              </thead>


        </table>
      </div>
    </div>


      <div class="container">
        <div class="table-responsive">
            <table class="table" width="100px" align="center">
                <thead>
                    <tr class="cliente">
                          <th class="cor">Quantidade</th>
                          <!-- <td>1</td> -->
                    </tr>
                    <tr class="clientess">
                          <th class="cor">Nº.Pedido</th>

                    </tr>
                    <tr class="fiscal">
                          <th class="cor">Nota Fiscal</th>
                          <!-- <td>5874</td> -->
                    </tr>
                    <tr class="entprevista">
                          <th class="cor">Entrega Prevista</th>
                          <!-- <td>12-12-2017</td> -->
                    </tr>

                </thead>
          </table>
        </div>
      </div>

Browser other questions tagged html5 css3 bootstrap-3

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

by Rui Ferreira • **321** points · Answer 1 · 2017-11-03T12:59:25+00:00

Do you need to use ul and li? Why not like this:

<div class="row">
<div class="col-xs-4">
    <div class="row">
        <div class="col-xs-12 lipostagem"><a href="PostagemTeste.html"><img class="img2 img-responsive" src="img/azul/teste.png" alt="Sucesso"> <span class="post">Postagem</span></div>
    </div>
</div>
<div class="col-xs-4">
    <div class="row">
        <div class="col-xs-12 liviagem"><a href="#"><img class="img2 img-responsive" src="img/cinza/cinza1.png" alt="Sucesso"><span class="viagem">Viagem</span></a></div>
    </div>
</div>
<div class="col-xs-4">
    <div class="row">
        <div class="col-xs-12 lientregue"><a href="EntregueCerto.html"><img class="img2 img-responsive" src="img/cinza/cinza1.png" alt="Sucesso"><span class="entregue">Entregue</span></a></div>
    </div>
</div>