Avisos
Vaciar todo

Como puedo alinear la fecha y la hora a la derecha y que salga a todos los mobiles igual

16 Respuestas
4 Usuarios
0 Reactions
47 Visitas
Respuestas: 144
Estimable Member
Topic starter
 

Te dejo ahí dos capturas de pantalla tomadas des de distintos mobíles donde se puede apreciar perfectamente que dependiendo de con que mobil se mire se ve d'una marea u otra:

WhatsApp Image 2020 07 26 at 17.53.24
WhatsApp Image 2020 07 26 at 17.54.47

Lo que busco es que quede alineado a la derecha tal i como se indica en verde, que quede alineado con el margen del texto  de la noticia i la imagen, que debo hacer?

Muchas gracias.


 
Respondido : 26/07/2020 4:04 pm
Argenis
Respuestas: 11585
Illustrious Member Moderator
 

Hola Eduard,

Inspeccionando con chrome puedo ver que estos textos son directamente de elementor, por lo que podrías verificar directamente entre las opciones de estilo del elementor, cuando estés en este elemento puedes señalar de la parte inferior izquierda el botón de responsive:

 

image

El ícono es el que tiene un monitor, al dar click obtendrás las opciones de visualización en tablet y en móviles, directamente desde estas secciones, los cambios que hagas solo se verán para estas, ejemplo:

Si seleccionas tablet los ajustes que hagas en tu sitio solo se verán al momento de verse en resolución de tablet, lo mismo aplicaría para móviles.

Puedes verificar si entre las opciones de diseño de este elemento esta la de alinear a la derecha directamente en el constructor, de esta forma evitamos saturar el sistema con códigos css, nos comentas si logras ver estas opciones.

Un saludo 🖐️ 


 
Respondido : 26/07/2020 4:43 pm
Respuestas: 144
Estimable Member
Topic starter
 

@argenis

Si marcas la opición de alinear a la derecha des de la pagina de edición, queda como deseamos....

Captura de Pantalla 2020 07 27 a les 15.15.49

Però en la realidad, cuando lo miras desde un mobil pasa esto:

WhatsApp Image 2020 07 27 at 15.20.53

 
Respondido : 27/07/2020 1:30 pm
Argenis
Respuestas: 11585
Illustrious Member Moderator
 

Hola Eduard,

Viendo el bloque de edición que nos enviaste en la captura, puede notar que estas utilizando un editor de texto en este valor, primero elimina el color amarillo que tienes en este texto y luego al momento de editar el texto te muestra una pestaña de html:

 

image

Una vez estes aca, sustituye en donde tengas la fecha por este código 

<span style="background-color: yellow;padding: 5px 0px 5px 5px;">27 juliol 2020</span>

Y luego en el apartado de la hora, haces lo mismo ingresas a html vez donde esta escrita la hora y escribes este código

<span style="background-color: yellow;padding: 5px 0px 5px 5px;">13:11</span>

De esta forma estarás colocando el texto alineado a la derecha (por el editor de elementor) y el color amarillo únicamente en el texto mediante el código

Prueba este método y nos confirmas, un saludo 🖐️ 


 
Respondido : 27/07/2020 1:55 pm
Respuestas: 144
Estimable Member
Topic starter
 

@argenis

No hay el apartado HTML porque la fecha se escribe sola dependiendo del día que es, y con la hora pasa lo mismo. Como lo hacemos?

Captura de Pantalla 2020 07 27 a les 17.34.49

 
Respondido : 27/07/2020 3:36 pm
Argenis
Respuestas: 11585
Illustrious Member Moderator
 

Hola Eduard,

Perfecto, en este caso supongo eso que editas es la plantilla general para que se muestran las entradas? en este caso en la última captura que envías ingresa a estilo, y alineas el texto a la derecha, luego le eliminas el color del fondo y por último ingresas a avanzado y en Id de CSS le asignas un nombre supongamos al titulo (titulo-post) y al de la hora (hora-post) esto para poder ver si te podemos proporcionar un css específico para estas dos zonas y que no afecte al resto del contenido.

Un saludo 🖐️ 


 
Respondido : 27/07/2020 3:46 pm
Respuestas: 144
Estimable Member
Topic starter
 

@argenis

Nos hemos quedado aquí, sale en rojo, esto significa algo? Que podemos hacer ahora?

Captura de Pantalla 2020 07 28 a les 0.06.37

 
Respondido : 27/07/2020 10:07 pm
Bulmaro
Respuestas: 4380
Famed Member Moderator
 

@yolandaadvocatsalat-cat

Hola Eduard,

Significa que estás cometiendo un error de sintaxis, debes ingresarlo de la manera siguiente para el caso, como @argenis te indicó, de haberle asignado un ID de CSS al elemento HTML:

#titulo-post{

}

#hora-post{

}

Por ahora podrías dejar el código tal como te lo comparto, ya luego te daremos indicaciones y el código adicional para modificar los estilos. 

Saludos


 
Respondido : 27/07/2020 10:54 pm
Respuestas: 144
Estimable Member
Topic starter
 
Captura de Pantalla 2020 07 28 a les 9.56.05

Así si que nos lo reconoce, que tenemos que poner en la "rule"?

Si ponemos lo que nos dice Argenis, no sale bien.

Captura de Pantalla 2020 07 28 a les 10.00.03

 
Respondido : 28/07/2020 8:00 am
Karen Rios
Respuestas: 18684
Illustrious Member Moderator
 

Hola Eduard,

El problema  es que no estas añadiendo la regla de forma adecuada, tu código debe ser el siguiente

#titulo-post{
background-color: yellow;
padding: 5px 0px 5px 5px;
}

#hora-post{
background-color: yellow;
padding: 5px 0px 5px 5px;
}

No debe tener etiquetas HTML ya que estas incorporando estilos en CSS

Prueba si con ello logras añadir lo que necesitas.

Un Saludo

 


 
Respondido : 28/07/2020 8:12 am
Respuestas: 144
Estimable Member
Topic starter
 

@karen

Captura de Pantalla 2020 07 28 a les 10.21.25

No hay cambios al añadirlo.


 
Respondido : 28/07/2020 8:22 am
Karen Rios
Respuestas: 18684
Illustrious Member Moderator
 

Hola Eduard,

Entiendo, puedes enviarnos la URL de tu sitio web? si es posible donde se muestre la fecha que necesitas modificar.

Un Saludo


 
Respondido : 28/07/2020 8:28 am
Respuestas: 144
Estimable Member
Topic starter
 

@karen

Contenido solo visible a usuarios registrados

En este caso estamos tratando de cambiar-lo con esta noticia porque no es tan reciente i no recibe tantas visitas ya. Pero una vez hecho lo aplicaremos a todas la noticias creando una plantilla. De momento trabajamos sobre esta.


 
Respondido : 28/07/2020 8:54 am
Karen Rios
Respuestas: 18684
Illustrious Member Moderator
 

Hola Eduard,

Entiendo, en este caso veo que aun no estas añadiendo el ID para que este elemento tome la regla del CSS. 

Veo que ahora estas agregando todo con los elementos de elementor lo que no permite añadir una clase especifica para la fecha

imagen

Puedes verificar el siguiente articulo donde te mencionan como puedes asignar clases a elementos dentro del constructor para añadir estilos personalizados.

-> https://docs.elementor.com/article/516-how-to-use-selector-in-the-custom-css-tab

Un Saludo


 
Respondido : 28/07/2020 9:21 am
Respuestas: 144
Estimable Member
Topic starter
 

@karen

Captura de Pantalla 2020 07 28 a les 11.40.48

 

WhatsApp Image 2020 07 28 at 11.39.35
Captura de Pantalla 2020 07 28 a les 11.40.40

 

Vale ahora nos ha reconocido las acciones. Ahora lo tenemos que poner bien (como havia explicado arriba)  y sobretodo hacer que se edite solo la versión móbil porque creo que  lo hemos cambiado a todas las versiones.


 
Respondido : 28/07/2020 9:43 am
Página 1 / 2