Archived topic
Botones muy juntos y de diferentes tamaños
15 replies · Started by Alejandro on April 12, 2021
Hola,
en el tema niche, después de "Realizar pedido",
me aparecen los botones muy juntos y de diferentes tamaños,
¿Cómo puedo solucionar esto?
Gracias.
Hi there,
can you share a link to the site so i can take a look ?
I cannot reach the page - even if i use a valid spanish address in the checkout it won't process the order.... can you right click and inspect the Button in the Chrome developers tools and provide a screenshot of the page with the dev tools open ?
Try adding this CSS:
.woocommerce a.button.cancel {
margin-left: 20px;
}Se medio soluciona en el dispositivo computadora aunque un botón queda un poco más pequeño que el otro y en el dispositivo móvil los botones quedan pegados.
Adjunto capturas:
Hi Alejandro,
I can't reach the page either, so I can only guess the CSS solution based on your screenshots :)
Try use this CSS instead:
@media (min-width: 769px) {
.woocommerce a.button.cancel {
margin-left: 20px;
}
}
.woocommerce a.button.cancel {
padding: 12px 20px; /*adjust the number 12*/
}
@media (max-width: 768px) {
.woocommerce a.button.cancel {
margin-top:20px;
}Casi funciona!! Pero todavía tiene algún error...
Adjunto capturas:
Can you provide me another screenshot of this element:
https://www.screencast.com/t/7xf99YbGtE
So i can see its CSS properties.
I need to see the full styles panel - so I can see what CSS selectors are being used - is that possible - sorry for the hassle!
This is mostly a guessing game as we aren't able to actually see the element.
You could try adding thing:
.woocommerce a.button.cancel {
line-height: inherit;
}Does that make them equal heights? You may need to adjust/removing the padding part of the custom CSS.
Muchísimas gracias por vuestra paciencia.
Por fin lo he solucionado, al final la solución la he encontrado en el código que me facilitó Ying, pero haciendo un pequeño cambio en el padding y en los pixeles de @media que además me lo puso como comentario en el código.
Al final he puesto esto:
media (min-width: 469px) {
.woocommerce a.button.cancel {
margin-left: 20px;
}
}
.woocommerce a.button.cancel {
padding: 11px 27px; /*adjust the number 12*/
}
@media (max-width: 468px) {
.woocommerce a.button.cancel {
margin-top: 20px;
}