How to place this article aligned with the others

Question

How to place this article aligned with the others

Navigation

#1 by (0 votes)

0

I have a problem, this happens when on responsive I make the screen smaller because the text does not fit:

There are 4 articles in cols of Bootstrap, I have tried to give clearfix behind all the article so everyone should be enlarged, but it does not go. My only solution was to give him padding:0 , I take what I had before so I do not get in the way, but it's a very poor way, any idea how to fix it?

This is my code:

/*------------- GENERAL ------------*/
body {
  /*NOT NECESSARY*/
  /*overflow-x: hidden;*/
  color: #8d8d8d;
}

i:not(.sinColorSepia) {
  color: rgb(122, 76, 30);
}

section {
  padding: 70px 0;
}

.row {
  padding: 12px 0;
}

/*---------------SECTION 2 ARTICLES---------------*/

section:nth-child(2) {
  padding: 40px;
  text-align: center;
  background: #000 url('../img/backgrounds/bg-skills.jpg') no-repeat fixed center / cover;
  color: white;
}

.section2 i {
  font-size: 30px;
  padding-bottom: 10px;
  position: relative;
}

.relativoParaVelo {
  position: relative;
}

.section2 article div {
  font-size: 30px;
  position: relative;
}

.section2 article {
  border: 1px solid white;
  padding: 30px;
  position: relative;
}

.section2 article::before {
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, .08);
  top: 0;
  left: 0;
  position: absolute;
}

.section2 article p {
  font-size: 15px;
  font-style: oblique;
}

/*------------------------COLORES LINEAS----------------------------*/

@media screen and (max-width: 1028px) {
  .section2 article {
    /*padding: 20px;*/
  }
}

@media screen and (max-width: 992px) {
  /*------------------------GENERAL----------------------------*/
  .section2 article {
    margin: 10px;
  }
}

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato:100,300|Montserrat|Open+Sans" rel="stylesheet">
<!-- Estilos -->
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap-reboot.css">
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap-grid.css">
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


<main>

  <section class="section2">
    <div class="container">
      <div class="row">
        <div class="col-lg-3 col-md-6">
          <article>
            <i class="fa fa-sliders sinColorSepia"></i>
            <div>752</div>
            <p class="diferenteArticleNoPadding relativoParaVelo">Proyectos realizados</p>
          </article>
        </div>
        <div class="col-lg-3 col-md-6">
          <article>
            <i class="fa fa-sitemap sinColorSepia"></i>
            <div>495</div>
            <p class="diferenteArticleNoPadding relativoParaVelo">Clientes satisfechos</p>
          </article>
        </div>
        <div class="col-lg-3 col-md-6">
          <article>
            <i class="fa fa-paper-plane-o sinColorSepia"></i>
            <div>16</div>
            <p class="diferenteArticleNoPadding relativoParaVelo">Premios ganados</p>
          </article>
        </div>
        <div class="col-lg-3 col-md-6">
          <article>
            <i class="fa fa-puzzle-piece sinColorSepia"></i>
            <div>+900</div>
            <p class="diferenteArticleNoPadding relativoParaVelo">Litros de café</p>
          </article>
          <div class="clearfix"></div>
        </div>
      </div>
    </div>
  </section>

</main>

html css bootstrap

asked by francisco dwq 29.01.2018 в 13:07

source

1 answer

Generate a script in SQL Server Receive Notifications in Market Payment with Flask

score 0 · Answer 1

I see it easy to solve, to .col-lg-3 you become a flexible parent and the article becomes a flexible child and you add the following flex property: 1 0 auto;

it looks like this:

 .col-lg-3{
     display: flex;
 }
 article{
     flex: 1 0 auto;
 }