Soporte » Diseño – Temas y plantillas » Código css para tag en listado de productos

  • Resuelto daveagain87

    (@daveagain87)


    Hola a todos, tengo el siguiente código CSS para que muestre los TAG’s en los listados de productos dentro de las categorías, pero tengo un problema con los nombres de los productos que requieren dos líneas (que son muy largos):

    .woocommerce-loop-product__link > .woocommerce-loop-product__title{width:100%; position:relative; margin: 0 auto; top:30px !important}

    .woocommerce-loop-product__link > .price {width:100%; position:relative; text-align:center !important; margin: 0 auto; align-content: center; margin-top: 50px !important}

    .product_metass{width:100%; position:relative; text-align:center !important; margin: 0 auto; align-content: center; top:0px !important }

    .product_metass a {width:100%; position:absolute; text-align:center !important; margin: 0 auto; align-content: center; left: 0px;
    top: -100px !important; }

    .product_metass a:nth-child(1){ display:none !important}

    El problema que tengo es que esos productos con nombre muy largo no me respeta el espacio entre título de producto y tag.

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 2 respuestas - de la 1 a la 2 (de un total de 2)
  • Hola @daveagain87

    Examinando tu codigo por encima, el problema lo tienes en la jerarquia del HTML.

    Metes el codigo HTML para «18k Gold» debajo del titulo y precio cuando quieres que aparezca antes y fuerzas con CSS su posicion creando ese problema cuando el titulo es muy largo.
    Cambia la estructura del HTML y luego aplica el CSS necesario para darle estilo.

    Gracias amigo, lo que hice fue dejar esa etiqueta debajo del título y se resolvió todo.

Viendo 2 respuestas - de la 1 a la 2 (de un total de 2)
  • Debes estar registrado para responder a este debate.