Modificar CSS de mi página en Wordpress

[Nikande]

Muy buenas, gente!

Soy un usuario antiguo del foro pero muy nuevo posteando y me surgió una duda creando una web.

A través de Wordpress, con la plantilla Parallax one, he creado esta web: http://www.mobag.es/ y me gustaría que me ayudaseis en un tema concreto.

Justo debajo de los botones sociales existen 4 imágenes a modo de "portfolio", que tienen un hover que dejan ver un texto. Bien, mi duda es la siguiente: cómo puedo modificar el CSS de la página para que dichas imágenes de portfolio sean más grandes (ocupen más espacio de la página) y sigan siendo responsive en el móvil. Cómo mucho he logrado aumentarlas hacia la derecha y hacia abajo, pero no puedo centrarlas para que ocupen el espacio tanto a la derecha como a la izquierda. Para que os hagáis una idea, querría algo como lo que tienen en esta web http://www.birksun.com/ (las tres imágenes de abajo), en cuanto a tamaño. No es necesario que ocupen todo el ancho, pero sí que sean más vistosas.

Muchas gracias por todo!

[#!drvy]

Tendras que editar el HTML tambien. El template esta basado en Bootstrap y usa los famosos grids para los tamaños.

Cada imagen esta metida en un div así:

Código (html5) [Seleccionar] Expandir

<div class='col-md-3 portfolio-single-item'></div>

Donde col-md-3 es el tamaño que dicho tendrá en el grid. Se puede incrementar el numero hasta 12 aunque hay que tener en cuenta los demás.

Luego tendrás que cambiar la clase de las imágenes que es .portfolio-detail-image img, le añades una regla de width: 100%; y listo.

Pero vamos, lo mas importante es cambiar el html ya que el tamaño esta definido previamente por los grids.

Saludos

[Nikande]

Perfecto, muchísimas gracias!

Estoy haciendo pruebas en la de trasteo que tengo y consigo ensanchar los grids, pero no hacerlos más altos. Es decir, si aumento el "col-md-X" a 12, por ejemplo, noto que se hace mucho más ancho, pero no aumenta proporcionalmente de alto.

Aun así, un placer la respuesta tan rápida y acertada!

Un saludo

[Maurice_Lupin]

Hola, Nikande.

Para complementar la información de #!drvy al trabajar con los grids de Bootstrap puedes ampliar el ancho, el alto se adapta al contenido, en tu caso serian las imágenes. Bootstrap tiene la clase img-responsive

Código (html4strict) [Seleccionar] Expandir

<img src="#" class="img-responsive" alt="Image">

Las imágenes ocuparan todo su contenedor sin deformarse.

Un ejemplo
http://www.w3schools.com/code/tryit.asp?filename=FAE89DHEVQLE&stacked=h

Más info
http://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp

Saludos.