Código css para tag en listado de productos

  • Resuelto daveagain87

    (@daveagain87)


    hace 3 años, 3 meses

    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)
  • Moderador kallookoo

    (@kallookoo)

    hace 3 años, 3 meses

    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.

    Iniciador del debate daveagain87

    (@daveagain87)

    hace 3 años, 3 meses

    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)
  • El debate ‘Código css para tag en listado de productos’ está cerrado a nuevas respuestas.