Problema com versão mobile - Centralização de textos e produtos



  • Olá pessoal,

    Estou enfrentando problemas no alinhamento do site versão mobile novo.
    Já segui um passo a passo do Charles, inclusive conversei com o mesmo sobre, que tentou me auxiliar.
    Mas não tem jeito, as imagens/texto/valores,etc não centralizam na HOME.
    Repare na imagem que quando o produto acaba tendo 2 linhas ele desalinha a imagem que vem a seguir, descendo a mesma, como se estivesse alinhado abaixo um do outro, e não centralizados lado a lado.
    Também estou enfrentando dificuldades na aba do produto, abaixo do produto apresenta o "APROVEITE TAMBÉM" que não apresenta produtos um ao lado do outro, ficando tudo desalinhado e não ao centro do site e das páginas.

    Fico no aguardo de um retorno.
    Obrigado.

    alt text



  • Olá pessoal,
    Já consegui resolver as questões acima.
    Agradeço a todos pela atenção.
    Abraço.



  • Como? também tenho o mesmo problema..



  • @Luan-Nauê Tbm tenho no Aproveite também... na Home eu consegui resolver editando a página "mobile_new/product_listing" centralizada assim:

    {% macro item(product, category, cols) %}
    <center><div class="product-list-item">
    ...
    </div></center>
    {% endmacro %}



  • @up-moda-comunicação Entendi, no meu caso é só na home e não tenho uma versão separada para mobile.
    Tentei implementar o <center> mas não rolou.



  • @luan-nauê
    Você deve criar a página mobile_new/style.html e colar o código abaixo:

    <style>
    .product-list-item .product-description .title{ margin-top: 15px; display: block; }
    .product-list-item .product-descriptiion .installments-price{ backgound: none; }
    #store-content .buy-btn { background-color: #71e2d3; }
    #product .add-to-wishlist .btn-primary { backgound-color: #71e2d3; }
    .product-list-item .product-description .price .product-saleprice{ font-size: 14px; color: #333; }
    .product-list-item .product-description .installments-price{ color: #666; font-weight: bold; }
    #store-content #product .showcase .prod-action { text-align: center; }
    .product-list-item .product-img img {
    max-height: 100% !important;
    }
    .product-list-item { width: calc(50% - 15px); display: inline-block; float: none; }
    #product .prod-action .buy-price .sale { font-size: 21px; line-height: 20px; }
    #store-content #product .showcase .prod-action { margin-top: 0px; padding: 15px 0; }
    h4, h5, h6 {text-transform: none; }
    #produtct .buy.message { background: #ccc; }
    #form-page input, #form-page textarea{ width: 100%; }

    .whatsapp-fix{
    position: fixed;
    z-index: 20;
    bottom: 40px;
    right: 10px;
    

    }

    @keyframes pulse {
    0% {
    transform: scale(.9);
    }
    70% {
    transform: scale(1);
    box-shadow: 0 0 0 50px rgba(69, 152, 27, 0);
    }
    100% {
    transform: scale(.9);
    box-shadow: 0 0 0 0 rgba(69, 152, 27, 0);
    }
    }

    .whatsapp-fix.pulse-anime {
    box-shadow: 0 0 0 0 rgba(69, 152, 27, 0.5);
    border-radius: 50px;
    animation: pulse 2s infinite;
    }
    </style>