Avisos
Vaciar todo

dos columnas en movil  

 
marcos
 marcos
Usuario experto

hola me gustaria que las filas señaladas aparecieran en dos columnas en movil. tambien me gustaria saber como poner el boton dentro de la imagen. gracias

2022 03 03

 

Contenido solo visible a usuarios registrados

Citar
Respondido : 03/03/2022 8:38 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Marcos.

Prueba añadiendo lo siguiente en apariencia 

@media (max-width: 580px) {
.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
flex-basis: 50%!important;
}

}

 

Un saludo

ResponderCitar
Respondido : 03/03/2022 10:26 am

Cursos Gratuitos WordPress

marcos
 marcos
Usuario experto

@pepesoler funcionó muchas gracias. como hago para subir los botones al centro de la imagen ?

ResponderCitar
Respondido : 03/03/2022 11:55 am
marcos
 marcos
Usuario experto

perdona no funcionó, no hay espacio entre las imagenes, aparecen juntas

ResponderCitar
Respondido : 03/03/2022 12:01 pm

marcos
 marcos
Usuario experto
Screenshot 20220303 130425 Chrome
ResponderCitar
Respondido : 03/03/2022 12:04 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Marcos.

Modifica el código anterior por el siguiente:

@media (max-width: 580px) {
.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {
flex-basis: 45%!important;
}
}

 

Y añade el siguiente código:

@media (max-width: 580px) {
.wp-block-columns, .wp-block-column {
margin: 1rem 0 0 0.5rem;
}
.wp-block-columns:where(.has-background) {
padding: 1.25em 1em;
}
}

 

Un saludo

ResponderCitar
Respondido : 03/03/2022 12:55 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

marcos
 marcos
Usuario experto

@pepesoler

Screenshot 20220303 190818 Chrome

 Pero ahora se ve eso asi de mal. Solo quiero esas dos columnas no quiero toda la home asi.

ResponderCitar
Respondido : 03/03/2022 6:12 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Marcos, 

En este caso para que solo se aplique a esta sección debes añadir una clase personalizada a cada una de las secciones donde tienes las imágenes que deseas se añadan en dos columnas, para ello debes editar la página y selecciona la columna completa

Screenshot   2022 03 03T144848.105

Una vez las selecciones debes pulsar avanzado y añadir una clase, por ejemplo columna y guardar los cambios

Screenshot   2022 03 03T144957.439

Luego debes modificar el CSS anterior por el siguiente 

@media (max-width: 580px) {
.wp-block-columns.columna:not(.is-not-stacked-on-mobile)>.wp-block-column {
flex-basis: 45%!important;
}
}

De esta forma esta regla CSS solo se aplicará a la sección donde añadiste la clase personalizada 

Verifica si con ello puedes aplicar este cambio solo donde necesitas

Un Saludo 

 

ResponderCitar
Respondido : 03/03/2022 6:56 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

marcos
 marcos
Usuario experto

@karen si funciona pero otra vez me pasa que las imagenes se juntan en el medio

Screenshot 20220304 091223 Chrome

 

ResponderCitar
Respondido : 04/03/2022 8:12 am
Pepe
 Pepe
Soporte CMS Webempresa Admin

Hola Marcos.

prueba con lo siguiente:

@media (max-width: 580px) {
.columna .wp-block-image:not(.is-style-rounded) img {
padding: 0 0.5em 0 0
}
}

 

Un saludo

ResponderCitar
Respondido : 04/03/2022 10:51 am

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress