Css Productos Descuadrado

[mscdroidlabs.es]

Buenas noches, estoy adaptando el tema por defecto en prestashop 1.6 'default-boostrap' a partir de un diseño, el caso es que cuando llegue a la página correspondiente al producto, me encuentro con esto : 

 

 

 

 

 

 

 

 

 

 

 

 

He estado revisando los archivos 'product.tpl' y el 'product.css', pero no encuentro la manera de hacer que las columnas de info del producto y cuadro de precio se vuelvan a ver en su posición original y no todas puestas en serie en vertical.  Os pediría un poquito de ayuda si alguno puede echarme un cable o tiene mas idea que yo.

 

Gracias! 

Edited March 14, 2016 by mscdroidlabs.es (see edit history)

[moy2010]

Tienes que flotar a la izquierda el divisor que contiene al texto. Supongo que eso es lo que buscas.

[mscdroidlabs.es]

Tienes que flotar a la izquierda el divisor que contiene al texto. Supongo que eso es lo que buscas.

 

No te he acabado de entender muy bien. A lo que me refiero es que normalmente, la imágen sale a la izquierda y la descripción a su derecha, seguida de la caja de pago.

 

Algo así : 

 

[Diefco]

Hola mscdroidlabs.es,
Lo mas seguro es que no tengas las clases de columnas correctamente.
Te explico breve mente, prestashop en su tema default trabaja con columnas proporcionadas por el framework bootstrap.
Para que encajen en la misma "linea" en sus clases debe sumar 12.
Me explico:
 

<div class="container">
	<div class="row">
		<div class="col col-xs-12 col-sm-6 col-md-4">Este div en movil ocupara 12 columnas, y en tablet hacia arriba ocupara solo 6.</div>
		<div class="col col-xs-12 col-sm-6 col-md-4">Para que encajen en pantalla se deben sumar 12 columnas</div>
                <div class="col col-xs-12 col-sm-6 col-md-4">por lo tando en pantallas desktop estos 3 textos apareceran en una linea.</div>
	</div>
</div>

 

col-md: 4+4+4 = 12 = todos en el 100% del ancho de la pantalla.

col-sm: 6+6+6 = 18 = 12 ocuparan el 100% de la pantalla, y el 6 sobrante saltara a la siguiente linea ocupando el 50% solamente(ya que es la mitad).

col-xs: 12+12+12 = 32 = cada texto ocupara su propio 100% en la pantalla.

 

No se si me he hecho entender, pero te recomiendo te pases por la documentación oficial de bootstrap y lo veas explicado de una mejor manera, con mas detalles y demostraciones.

[moy2010]

Búscate en Google la propiedad "float" de CSS para que entiendas un poco más sobre el tema. Otra posible razón a tu problema es que estés viendo la página con zoom (por ejemplo, 110%) en el navegador y por ello te esté descuadrando el diseño en pantalla.

[mscdroidlabs.es]

 

Hola mscdroidlabs.es,

Lo mas seguro es que no tengas las clases de columnas correctamente.

Te explico breve mente, prestashop en su tema default trabaja con columnas proporcionadas por el framework bootstrap.

Para que encajen en la misma "linea" en sus clases debe sumar 12.

Me explico:

 

<div class="container">
	<div class="row">
		<div class="col col-xs-12 col-sm-6 col-md-4">Este div en movil ocupara 12 columnas, y en tablet hacia arriba ocupara solo 6.</div>
		<div class="col col-xs-12 col-sm-6 col-md-4">Para que encajen en pantalla se deben sumar 12 columnas</div>
                <div class="col col-xs-12 col-sm-6 col-md-4">por lo tando en pantallas desktop estos 3 textos apareceran en una linea.</div>
	</div>
</div>

 

col-md: 4+4+4 = 12 = todos en el 100% del ancho de la pantalla.

col-sm: 6+6+6 = 18 = 12 ocuparan el 100% de la pantalla, y el 6 sobrante saltara a la siguiente linea ocupando el 50% solamente(ya que es la mitad).

col-xs: 12+12+12 = 32 = cada texto ocupara su propio 100% en la pantalla.

 

No se si me he hecho entender, pero te recomiendo te pases por la documentación oficial de bootstrap y lo veas explicado de una mejor manera, con mas detalles y demostraciones.

 

 

 

 

 

Gracias Diefco!

Me ha quedado bastante claro, en un rato probaré a hacer ciertas modificaciones y te comento!

 

Con gente así da gusto preguntar! 

Edited March 15, 2016 by mscdroidlabs.es (see edit history)

[Diefco]

Jaja, que bueno que lo hayas entendido.
Pero si, igual cualquier cosa en la documentación tienen toda la info del grid, o rejilla con la que trabaja el responsive, por eso el xs. sm, md, lg.
cada una corresponde a un tamaño de pantalla, movil, tablet, desktop, televisores (por asi decirlo, en realidad son cada numero de pixeles), pero en la documentacion encuentras todo eso, y muchas cosas mas que te puedan facilitar los cambios de tu tema.
Esperamos que nos cuentes