Detalhes da questão

Endereço do fórum: https://www.criadoresdepassaros.com/
Versão do fórum: phpBB3

Descrição

Bom dia , gostaria de editar este código , ele ficou perfeito mais não tem um local que possa escrever a descrição do produto que esta em venda , poderia colocar apenas um campo de descrição do produto . segue código e também ao final da pagina um botão de avançar para próxima pagina já que terá bastante produtos e varias paginas , desde obrigado

Código:

<div class="fa-grid-widget">
    
   <div class="fa-grid-widget-row">
           
      <div class="fa-grid-widget-column">
                 <a href="#"><img src="https://i62.servimg.com/u/f62/15/98/91/46/rnyczg10.jpg" /></a>        <a href="https://produto.mercadolivre.com.br/MLB-933009116-mistura-para-trinca-ferro-_JM"><img src="https://i.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a>     
      </div>
           
      <div class="fa-grid-widget-column">
                 <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>        <a href="#"><img src="https://i.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a>     
      </div>
           
      <div class="fa-grid-widget-column">
                 <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>        <a href="#"><img src="https://i.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a>     
      </div>
       
   </div>
    
   <div class="fa-grid-widget-row">
           
      <div class="fa-grid-widget-column">
                 <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>        <a href="#"><img src="https://i.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a>     
      </div>
           
      <div class="fa-grid-widget-column">
                 <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>        <a href="#"><img src="https://i.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a>     
      </div>
           
      <div class="fa-grid-widget-column">
                 <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>        <a href="#"><img src="https://i.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a>     
      </div>
       
   </div>
    
   <div class="fa-grid-widget-row">
           
      <div class="fa-grid-widget-column">
                 <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>        <a href="#"><img src="https://i.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a>     
      </div>
           
      <div class="fa-grid-widget-column">
                 <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>        <a href="#"><img src="https://i.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a>     
      </div>
           
      <div class="fa-grid-widget-column">
                 <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>        <a href="#"><img src="https://i.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a>     
      </div>
       
   </div>
     <style>
      .fa-grid-widget-row {
        overflow: hidden;
        margin-bottom: 20px;
        padding: 5px;
      }
     
      .fa-grid-widget-column {
        box-sizing: border-box;
        width: 31%;
        margin: 0 1%;
        box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.2);
        padding: 5px;
        float: left;
      }
     
      .fa-grid-widget-column > a:first-child {
        display: block;
      }
     
      .fa-grid-widget-column img {
        max-width: 100%;
      }
  </style>
</div>

Troque por esse:

Código:

<div class="fa-grid-widget">
     
  <div class="fa-grid-widget-row">
           
      <div class="fa-grid-widget-column">
                  <a href="#"><img src="https://i62.servimg.com/u/f62/15/98/91/46/rnyczg10.jpg" /></a>    <p>Descrição aqui</p>    <a href="https://produto.mercadolivre.com.br/MLB-933009116-mistura-para-trinca-ferro-_JM"><img src="https://i.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a>     
      </div>
           
      <div class="fa-grid-widget-column">
                  <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a> <p>Descrição aqui</p>        <a href="#"><img src="https://i.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a>     
      </div>
           
      <div class="fa-grid-widget-column">
                  <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>  <p>Descrição aqui</p>      <a href="#"><img src="https://i.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a>     
      </div>
       
  </div>
     
  <div class="fa-grid-widget-row">
           
      <div class="fa-grid-widget-column">
                  <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>  <p>Descrição aqui</p>      <a href="#"><img src="https://i.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a>     
      </div>
           
      <div class="fa-grid-widget-column">
                  <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>  <p>Descrição aqui</p>      <a href="#"><img src="https://i.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a>     
      </div>
           
      <div class="fa-grid-widget-column">
                  <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>  <p>Descrição aqui</p>      <a href="#"><img src="https://i.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a>     
      </div>
       
  </div>
     
  <div class="fa-grid-widget-row">
           
      <div class="fa-grid-widget-column">
                  <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>  <p>Descrição aqui</p>      <a href="#"><img src="https://i.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a>     
      </div>
           
      <div class="fa-grid-widget-column">
                  <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>  <p>Descrição aqui</p>      <a href="#"><img src="https://i.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a>     
      </div>
           
      <div class="fa-grid-widget-column">
                  <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a>  <p>Descrição aqui</p>      <a href="#"><img src="https://i.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a>     
      </div>
       
  </div>
      <style>
      .fa-grid-widget-row {
        overflow: hidden;
        margin-bottom: 20px;
        padding: 5px;
      }
     
      .fa-grid-widget-column {
        box-sizing: border-box;
        width: 31%;
        margin: 0 1%;
        box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.2);
        padding: 5px;
        float: left;
      }
     
      .fa-grid-widget-column > a:first-child {
        display: block;
      }
     
      .fa-grid-widget-column img {
        max-width: 100%;
      }
    
     .fa-grid-widget-column p {
    
     }
  </style>
</div>

O senhor pode editar a descrição onde está escrito Descrição aqui.