Problema de enlace web que ocupa todo el ancho

Hola chicos, tengo un icono y debajo un texto, pero me pasa algo rarito, resulta que la zona de clic llega a lado y lado de pantalla, como indico en la captura de pantalla, toda la parte amarilla queda vinculada con el mismo enlace web que el icono/texto en el centro...

No sé si es cosa del theme (ColorMag lite) o qué pueda ser.

¿Me echáis una mano? Gracias

creiria que todo esta en un div o section , Se puede separar con div . :encouragement:

(E usado colormag y puedes usar tanto un imagen del ancho y y largo que se quiera o un logo .)

Ging dijo:

creiria que todo esta en un div o section , Se puede separar con div . :encouragement:

(E usado colormag y puedes usar tanto un imagen del ancho y y largo que se quiera o un logo .)

Hacer clic para expandir...

Eliminé el DIV (que se genera automáticamente) pero persiste el problema... no sé si es por la alineación de la imagen...

Efectivamente tienes el enlace afectando a todo el elemento. Como no tiene una clase única no puedes acotarlo desde CSS, para estas cosas lo ideal es que conserves el div y le pongas una clase única.

De todas formas, tal y como lo tienes ahora, te debería funcionar si añades al final de tu style.css esto:

.wp-image-21541{
display: inherit!important;
}

Así la imagen no te ocupará todo el contenedor sino que exclusivamente ocupará los 70px de ancho que tiene y el link hará lo mismo. Con ese cambio el link te estaría afectando solo a esta zona:

Gracias por el dato @piando

Ya en un rato lo pruebo y te comento. Te agradezco.

¿Es un problema del theme o de WordPress?

ramonjosegn dijo:

Gracias por el dato @piando

Ya en un rato lo pruebo y te comento. Te agradezco.

¿Es un problema del theme o de WordPress?

Hacer clic para expandir...

Es un problema derivado de la falta de un div con una clase única para ese elemento.
Si tú mismo borraste el div entonces... ¡¡ tú eres el problema !! :welcoming:

piano dijo:

Es un problema derivado de la falta de un div con una clase única para ese elemento.
Si tú mismo borraste el div entonces... ¡¡ tú eres el problema !! :welcoming:

Hacer clic para expandir...

Jajaja, no no soy yo el problema, el DIV estaba ahí y pasaba lo mismo...

En fin, voy a escribir una biblia que se va a llamar "misterios de wordpress"...

ramonjosegn dijo:

Jajaja, no no soy yo el problema, el DIV estaba ahí y pasaba lo mismo...

En fin, voy a escribir una biblia que se va a llamar "misterios de wordpress"...

Hacer clic para expandir...

jajaja...

Ahora en serio compi: No te puedo decir cual es la raíz del problema porque no tengo ni idea de WP ni tampoco conozco ese theme que usas. Lo que sí que me llama la atención es que los tres elementos que tienes encima de ese si que tienen sus correspondientes divs con su clase única y ese elemento es un simple <p> sin clase ni nada.

Si el div estuviera entonces lo más sencillo es darle un ancho máximo y listo pero al no tener el div el campo <p> ocupa directamente el 100% de la pantalla y junto con él también va el link.

Desde luego la solución ideal no es esa que te he dado. Lo ideal aquí sería mantener el div y limitar el ancho de ese div desde el css. Pero creo que te va a funcionar, al menos a mi en la consola me está funcionando bien.

piano dijo:

jajaja...

Desde luego la solución ideal no es esa que te he dado. Lo ideal aquí sería mantener el div y limitar el ancho de ese div desde el css. Pero creo que te va a funcionar, al menos a mi en la consola me está funcionando bien.

Hacer clic para expandir...

En serio... voy a lanzar un blog "misterios sin resolver..." ah no ese ya está cogido, jajaa...

Gracias por la ayuda.

ramonjosegn dijo:

En serio... voy a lanzar un blog "misterios sin resolver..." ah no ese ya está cogido, jajaa...

Gracias por la ayuda.

Hacer clic para expandir...

He estado revisándolo y no parece que haya ningún problema. El diseñador resolvió que el ancho de las columnas se adapte dependiendo de cuantas sean. Si hay tres columnas cada una ocupa el 30% del ancho y si hay una sola ocupa el 100%. Con div o sin él suele ser la solución más lógica porque es la visualmente más agradable. Realmente no creo que lo resolvieran mal, yo habría hecho lo mismo, lo que pasa es que no siempre se acierta y hay casos concretos como éste en donde la fórmula no queda todo lo bien que debería.

En bootstrap para solucionar este tipo de cosas sin tener que tocar el CSS lo más cómodo es crear las columnas faltantes en blanco. En este caso por ejemplo tienes 4 elementos y quieres que el cuarto te quede centrado en el medio ocupando el mismo tamaño que los demás. Bueno, pues creas 6 elementos en total y los números 4 y 6 los dejas en blanco. De esa forma forzarían a la columna número 5 a ocupar sólo el 30% del ancho de pantalla y quedaría como quieres que quede.

Puede ser que ese vinculo tiene un:

display:block;

Que hace que ocupe toda la página. Puedes ponerle un display:inline-block; para ver si se ajusta el tamaño.

Toma el inspector de Chrome o Firefox y comienza a desmarcar las opciones para ver con cual se desactiva y ahí encuentras el problema.

Quiero resaltar que Wordpress no tiene absolutamente NADA que ver con el problema que se describe, ya que los archivos del core de wordpress se ejecutan todos en el servidor, TODO LO QUE SE IMPRIMA EN EL FRONT-END es responsabilidad del desarrollador, si escoges una plantilla mal programada o usas un page builder que hace mal las cosas, el problema sigue siendo del desarrollador, quien mínimo tiene que ENTENDER como funciona el modelo de caja en html/css y los tipos de posicionamiento para resolver este tipo de detalles. Saludos.

Gracias por el comentario [MENTION=173141]denzel[/MENTION] - pero en realidad me refería al theme, perdona de pronto no me expliqué bien, una disculpa.

Gracias por la recomendación [MENTION=174443]mrguemez[/MENTION] - más tarde le echo un vistazo.