Métodos de envío de...
 
Avisos
Vaciar todo

Métodos de envío desalineados

9 Respuestas
3 Usuarios
0 Reactions
28 Visitas
Respuestas: 2639
Famed Member
Topic starter
 

Hola, me gustaría que los métodos de envío se mostraran uno debajo de otro y no uno al lado de otro, ya que crean confusión. Las opciones de pago están alineadas de esa manera y es más claro. Adjunto imágenes para que se entienda mejor.

Saludos y gracias

envio alinear1
envio alinear2

 

Contenido solo visible a usuarios registrados


 
Respondido : 15/01/2025 11:15 am
Pepe
 Pepe
Respuestas: 41121
Illustrious Member Admin
 

Hola Alceste.

Solo veo un metodo de envio, no se si hay que seleccionar algún producto en concreto u otra provincia para que se muestren esas opciones:

screenshot www agriprotector com 2025 01 15 12 47 19

 

Un Saludo


 
Respondido : 15/01/2025 11:49 am
Pepe
 Pepe
Respuestas: 41121
Illustrious Member Admin
 

Hola Alceste.

Pues esto es lo que veo yo, incluso con varias resoluciones:

chrome capture 2025 3 3 (3)

 

Pruébalo con el navegador en Privado.

 

Un Saludo

 


 
Respondido : 03/03/2025 1:04 pm
Respuestas: 2639
Famed Member
Topic starter
 

Hola Pepe, en la imagen que adjuntas se ve lo que te comentaba. Inserto un detalle de la misma imagen para que se entienda a qué me refiero. El importe no aparece en línea con el nombre del envío seleccionado y confunde.

Es decir, lo ideal sería una alineación como esta:

[X] Envío 1 Método ejemplo A: (Cargo: 20,00 €)

[] Envío 2 Método ejemplo B: (Cargo: 35,15 €)

 

Y, si no fuera posible que apareciera en la misma línea, sería mejor así:

[X] Envío 1 Método ejemplo A:

(Cargo: 20,00 €)

[] Envío 2 Método ejemplo B:

(Cargo: 35,15 €)

 

Pero ahora aparece de este modo, que se presta a confusión:

[X] Envío 1 Método ejemplo A:

(Cargo: 20,00 €)   [] Envío 2 Método ejemplo B:

(Cargo: 35,15 €)

 

 

MAL ALINEADO

 Saludos y gracias


 
Respondido : 03/03/2025 1:21 pm
Karen Rios
Respuestas: 18675
Illustrious Member Moderator
 

Hola Alceste, 

Lo que veo es que el código CSS de estos elementos hacen ahora que todos estén alineados, una alternativa que puedes probar es que se muestre de esta forma:

image

Para ello puedes probar añadir el siguiente código CSS en tu sitio web y ver si funciona

@media only screen and (min-width: 768px) {
.cart-summary .sectiontableentry1 fieldset {
display: flex;
flex-wrap: nowrap;
align-content: flex-start;
justify-content: flex-start;
align-items: flex-start;
}
}

Un Saludo

 

 
Respondido : 03/03/2025 1:49 pm
Respuestas: 2639
Famed Member
Topic starter
 

Hola Karen,

En una pantalla grande de ordenador con este código CSS se muestran una al lado de otra, pero en la pantalla de un móvil se ven igual. (Y en una pantalla de ordenador, si fueran 3 opciones con descripción grande, tal vez no cabrían) ¿No es posible que se muestre una debajo de otra, como en las sugerencias que hacía?

Muchas gracias por vuestra ayuda

Saludos


 
Respondido : 04/03/2025 8:45 am
Pepe
 Pepe
Respuestas: 41121
Illustrious Member Admin
 

Hola Alceste.

Prueba con esto:

fieldset label {
display: flex;
align-items: center; 
gap: 10px;
width: 100%; 
}

fieldset input[type="radio"] {
flex-shrink: 0;
}

fieldset label .vmshipment {
display: block;
flex: 1; 
max-width: 100%;
word-break: auto-phrase; 
}

 

Un Saludo


 
Respondido : 04/03/2025 10:11 am
Respuestas: 2639
Famed Member
Topic starter
 

Hola Pepe,

Con este código casi se resuelve. Sólo hay dos cosas que me hacen dudar de aplicarlo. Una es que este código también afecta a la alineación de las opciones de pago, que no necesitaría cambiar. La otra es que la casilla de verificación de cada método de envío se separa del nombre. Adjunto una imagen

Es decir, en lugar de quedar así: (Se entiende que [ ] corresponde al círculo de la casilla de verificación)

[X] Envío 1 Método ejemplo A:

(Cargo: 20,00 €)

[ ] Envío 2 Método ejemplo B:

(Cargo: 35,15 €)

 

Queda así:

[X]

Envío 1 Método ejemplo A:

(Cargo: 20,00 €)

[ ]

Envío 2 Método ejemplo B:

(Cargo: 35,15 €)

 

Captura de pantalla 2025 03 04 122257

 

No sé si sería posible ajustarlo. Si no, no pasa nada. Solamente me afecta en los casos en qué hay varias opciones de envío.

Saludos y gracias


 
Respondido : 04/03/2025 11:31 am
Pepe
 Pepe
Respuestas: 41121
Illustrious Member Admin
 

Hola Alceste.

El problema es por la tabla que muestra el total y el IVA de los porte. Podemos hacer que no afecte a los métodos de pago:

div#checkoutStep2 .vmshipment fieldset label {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
}

fieldset label .vmshipment {
display: block;
flex: 1;
max-width: 100%;
word-break: auto-phrase;
}

 

Un Saludo


 
Respondido : 04/03/2025 12:33 pm