[Resuelto] Problema con layout de la página de checkout

Hola,

Estoy usando CartFlows para crear un checkout personalizado. El problema es que en la página de checkout empieza "pegada" arriba, de modo que el botón de Google Pay queda superpuesto al logo y al header, tapándolos.

He intentado ajustar márgenes y padding con CSS, pero estoy un poco verde y no logro que el checkout respete el logo ni la cabecera, ni que el botón quede bien posicionado justo debajo dónde le toca estar. También intento abrir la página con Elementor pero me aparecen mensajes de error y no puedo abrirlo con Elementor, no entiendo por qué.

¿Podrían indicarme cómo configurar correctamente esto del checkout para que se muestre la cabecera y el logo correctamente? Necesito que el botón de google pay quede integrado arriba del checkout pero sin tapar nada así el diseño se podría ver limpio y más ordenado.

Gracias de antemano por la ayuda!

**edit : conseguí añadir un logo personalizado des de el CartFlow y ahora en PC se ve correctamente pero en móvil se ve fatal, por eso quería abrir con elementor a ver si podía ponerlo bien para ese dispositivo también.

➜ Dominio:  https://www.eltallerdelespiritu.org

Que tal Albert,

Revisando el sitio web adjunto desde donde haces la consulta no he podido apreciar a simple vista donde se encuentra el checkout sin embargo lo he ubicado

Si deseas que el aspecto en moviles sea algo como lo siguiente

Debes aplicar los siguientes estilos CSS 

@media(max-width:768px){
.main-header--site-logo{
width: 100%;
height: auto;
margin-left: 50%;
}}

Recuerda que puedes agregar estilos personalizados desde el apartado de Apariencia -> Personalizar -> CSS agregado

Saludos!

@bruno-vichetti

Hola Bruno,

Gracias por tu respuesta. He añadido el CSS que me sugeriste, pero el problema persiste en la página de checkout que es con la que estoy trabajando ahora. Te adjunto una captura de cómo se ve actualmente desde el móvil.

¿Existe algún fragmento de CSS que pueda aplicar unica y específicamente al checkout para mejorar la presentación del logo y evitar ese exceso de fondo blanco? Idealmente, me gustaría que el logo se viera más ajustado y centrado, y que el fondo no ocupe tanto espacio innecesario y quizá el logo algo más grande no sé..

Gracias de antemano por tu ayuda,

Un saludo.

Hola Albert,

Vamos a modificar un poco los estilos sugeridos para forzar que se vean como la captura de referencia que te he enviado anteriormente

@media (max-width: 768px) {
.woocommerce-checkout .main-header--site-logo {
width: 100% !important;
height: auto !important;
margin-left: 50%;
}
}

He añadido la expresion !important para forzar los estilos sobre los existentes

Tambien he agregado la clase "woocommerce-checkout" para que estos estilos solo se apliquen a la pagina de finalizar compra

Prueba y nos comentas

Saludos!

@bruno-vichetti

Solucionado!

Muchas gracias Bruno!

Que tal Albert,

Es un gusto saber que te ha funcionado, cualquier otra duda que tengas no dudes en comentarlo

Saludos!