Avisos
Vaciar todo

centrar entradas del blog

7 Respuestas
4 Usuarios
0 Reactions
1,110 Visitas
Respuestas: 64
Trusted Member
Topic starter
 

Las entradas en el blog se ven de forma descuadrada, ¿como hacer que todas las imágenes se vean del mismo tamaño y los textos cuadrados? gracias
www.fincasparabodas.es/ en la sección blog.

URL del sitio: Contenido solo visible a usuarios registrados


 
Respondido : 23/04/2016 11:53 pm
Luis Mendez Alejo
Respuestas: 23273
Illustrious Member
 

Hola Israel,

He mirado el blog de Bodas en la url: http://www.fincasparabodas.es/fincas-para-bodas-en-madrid/ y veo que colocas imágenes muy grandes respecto al texto que se muestra.

Te recomiendo que leas este artículo de Berto:
http://www.ciudadano2cero.com/fotos-imagenes-paginas-web/

Si quieres probar algo rápido mientras piensas todo lo que comenta Berto, lo primero que te tendrías que plantear sería si quieres colocar una imagen a la izquierda o derecha de cada entrada o una imagen que ocupe todo el ancho y debajo el texto.

Fíjate en nuestro blog, revisa las primeras páginas y ves avanzando para que veas como lo hacemos ahora y como lo hacíamos en la página 5, 6, 7.

https://www.webempresa.com/blog.html

Si colocas las imágenes a izquierda o derecha de cada artículo tendrás que buscar un tamaño que te guste por ejemplo 200x200 o 250x200, etc y luego tendrás que mostrar texto para que como mínimo ocupe el mismo tamaño que la imagen.

Si revisas varios blogs que te gusten fíjate como lo hacen ellos y que tamaño de imagen usan y cuanto texto colocan.

Saludos


 
Respondido : 24/04/2016 2:11 am
Jhon
 Jhon
Respuestas: 44989
Illustrious Member Moderator
 

Hola

Adicionalmente a lo que te comentó Alejo, creo que debes tener en cuenta que tus imágenes no tienen la misma proporción, por lo tanto no se verá de manera adecuada incluso si fuerzas las dimensiones por CSS.

Una solución sería que evalues tener todas tus imágenes de la misma proporción, evidentemente habrán imágenes más altas que anchas, en este caso puedes usar un programa gráfico para rellenar espacio con algún fondo.

Otra solución sería usar CSS pero para acomodar lo que tienes actualmente, centrando la imagen, pasando el texto a la parte inferior y poniendo un fondo. Tendrías que agrear un código CSS como el siguiente :

.img-intro-left{
	width:100%;
	text-align:center;
	background:gray;
}

Este código se puede agregar en un CSS personalizado, revisa :
https://www.webempresa.com/blog/agregar-archivo-css-personalizado-para-plantillas-gantry.html

Saludos.


 
Respondido : 24/04/2016 3:51 am
Respuestas: 64
Trusted Member
Topic starter
 

hola, en primer lugar gracias por vuestras respuestas, estoy realizando pruebas.

¿en que ruta debo meter el codigo que me hablas?

Gracias.


 
Respondido : 24/04/2016 1:53 pm
Respuestas: 64
Trusted Member
Topic starter
 

ok, ya he visto que era en editar css. resuelto, Muchas gracias a los 2.


 
Respondido : 24/04/2016 1:59 pm
Pepe
 Pepe
Respuestas: 41113
Illustrious Member Admin
 

Hola Israel.
Primero tienes que crear un archivo personalizado de estilos para que no se pierdan las modificaciones que realices cada vez que actualices la plantilla.

Revisa esta entra del blog que explica como crear el archivo:
Agregar archivo CSS personalizado para plantillas Gantry

Una vez creado el archivo tienes que editarlo y añadir el código que te adjunto Jhon:

.img-intro-left{
	width:100%;
	text-align:center;
	background:gray;
}

Un saludo


 
Respondido : 24/04/2016 2:02 pm
Luis Mendez Alejo
Respuestas: 23273
Illustrious Member
 

Hola Israel,

Encantados de haberte ayudado, gracias a ti.

Aun así estoy revisando tu blog y creo que puedes mejorar la forma en la que muestras las imágenes, por lo que veo te será más fácil utilizar imágenes de 200x250 y el texto a la izquierda o derecha, tendrías que usar siempre una plantilla de imagen vacía con ese tamaño de 200x250 y pegar encima la foto que quieres colocar adaptada ya a 200 de ancho o 250 de alto y luego centrar la foto para que se te adapte a ese tamaño de 200x250.

Si cuando estás haciendo pruebas ves que prefieres otra tamaño en vez de 200x250 prueba tú mismo con el tamaño que más te guste.

Si todas las imágenes tienen el mismo tamaño te quedará mejor.

Saludos


 
Respondido : 24/04/2016 7:05 pm