AYUDA en CSS y HTML

Buenas, tengo una web que tiene tres imagenes en PNG. el problema que es que el sitio es responsive y al verlo en una tablets o smarphone esas tres imagenes se me descontrolan.




Quisiera saber si hay una forma de centrarla tanto en pantallas grandes para Pc como tambien para smarphone y tablets. y que se adapte.

aqui pego el codigo HTML y el CSS

http://codepen.io/anon/pen/JdNdVW

Ayudenme en si lo que quiero es que esas tres imagenes aparzcan centradas y buenas en tamaño en smarphone y tablets

Usando media queries, cuando el ancho de la pantalla sea igual o mayor a la suma de los anchos de las imágenes (más su padding/border/margin, si los tuviera) le pones a esas imágenes display: inline-block;, de lo contrario, le pones display: block y margin: auto;. El contenedor debe tener text-align: center;. eso es todo.

Por lo que veo estas usando Bootstrap.. usa "col-sm-12" para que los div contenedores de las imágenes ocupen todo el ancho del dispositivo cuando sean de resoluciones mas pequeñas..

Sino hay 2 opciones mas, como bien dijo DriverOp, con media queries es una..

Yo lo que haria es colocar esos 3 divs en un contenedor que tenga "text-align: center;" y ya con colocar "display: inline-block;" y un ancho fijo a los div, es suficiente para que se ajusten sin necesidad de usar media queries, mientras menor tamaño tenga la ventana del navegador los div se van a acomodar debajo del otro, y al tener texto centrado, no se va a ver mal.

Te dejo un ejemplo:

http://codepen.io/fede5426/pen/mJmzBw

Tan simple como eso.

Espero que te sirva, saludos.

Me voy por la opción de media queries porque poniendo solamente inline-block a los elementos del contenedor, cuando el contenedor tenga un ancho menor a la suma de los anchos de los elementos pero mayor a la suma de dos de ellos, van a quedar dos en una línea y el tercero debajo. No queda bien así.

Muchas gracias.