Card misaligned horizontally with flex

Asked

Viewed 22 times

1

Friends, I’m having trouble leaving all cards of the same size with the database data, the problem is in card-center-text, who can help thank you

<div class="container rolar">


<?php
   require_once 'DB_Functions.php';
   $db = new DB_Functions();
   $cat=1;
    $rs=$db->promocao();

function limita_caracteres($texto, $limite, $quebra = true){
   $tamanho = strlen($texto);
   if($tamanho <= $limite){ //Verifica se o tamanho do texto é menor ou igual ao limite
      $diferenca=$tamanho-$limite; // quantidade a ser inserida
       $novo_texto=str_pad($texto,$diferenca," ");


   }else{ // Se o tamanho do texto for maior que o limite
      if($quebra == true){ // Verifica a opção de quebrar o texto
         $novo_texto = trim(substr($texto, 0, $limite)).".";
      }else{ // Se não, corta $texto na última palavra antes do limite
         $ultimo_espaco = strrpos(substr($texto, 0, $limite), " "); // Localiza o útlimo espaço antes de $limite
         $novo_texto = trim(substr($texto, 0, $ultimo_espaco))."   "; // Corta o $texto até a posição localizada
      }
   }
   return $novo_texto; // Retorna o valor formatado
}
 $x=1;
                   $cat=1;
      while ($rows = mysqli_fetch_assoc($rs)) {
        $valor=$rows['valor'];
        $img=$rows['imagen'];
        $id=$rows['codigo_antigo'];
        $nome=$rows['nome'];
        $perc=$rows['perc_desconto'];
        $desc=$rows['descricao'];
        $filename = "../images/".$img;

?>

   <div class="slider1">

    <div class="card-group">
  <div class="card">
    <div>
      <img src="images/<?php echo $img;?>" width="60% " class="card-img-center" alt="">
    </div>
    <div class="card-body-new">
      <!--<h5 class="card-title">Título do card</h5>-->

      <p class="card-text-center"><?php echo limita_caracteres(utf8_encode ($desc),40); echo strlen(limita_caracteres(utf8_encode ($desc),40));?></p>

      <div class="item-info-product-preco ">
                  <!-- descrição-->
                    <div class="info-descricao">
                     <span class="item_price">  <?php echo 'R$ '.number_format(str_replace(',','.',$valor), 2, ',', ' ');?></span>

                    </div>
      </div>
      <div class="item-info-product-forma ">
       <?php
                          if($valor>=50){echo 'Em at&eacute; 3x de R$' .number_format(str_replace(',','.',($valor/3)), 2, ',', ' ').' s/Juros'; }else{echo 'Em 1 x de R$' .number_format(str_replace(',','.',($valor/1)), 2, ',', ' ').' s/Juros';}

                           $valor=str_replace(',','.',$rows['preco_promocao']);
        ?>

      </div>

    </div>
    <div class="row justify-content-center">
         <a href="single.html?id=<?php echo $id ?>"><button type="button" class="btn-lg  btn-danger">Comprar</button></a>
    </div>

  </div>

</div>



  </div>

<?php } ?>

</div>
.rolar
    {
        white-space: nowrap; /*Prevents Wrapping*/
        
        width: 600px;
        height: 320px;
        overflow-x: scroll;
        overflow-y: hidden;
    }
    .slider1
    {
        display: inline-block; /*Display inline and maintain block characteristics.*/
        vertical-align: top; /*Makes sure all the divs are correctly aligned.*/
        white-space: normal; /*Prevents child elements from inheriting nowrap.*/
        
        width: 150px;
        height: 80px;
        background-color: white;

inserir a descrição da imagem aqui

No answers

Browser other questions tagged

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