Mostrando productos de Amazon de manera horizontal con CSS

Buenas compañeros!

Estoy utilizando este código css que permite añadir productos de amazon de manera fácil y rápida sin tener la API. El problema es que me muestra los artículos en vertical, uno debajo del otro y los quiero en horizontal...

Algo estoy haciendo mal pero toque lo que toque no consigo ponerlos en horizontal....

/* Grid de Productos (si no tienes API) */
.product-grid {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: stretch;
align-content: space-around;
margin: 0 -20px;
background: #fff0;
}
.product {
flex: 0 1 auto;
align-self: auto;
overflow: hidden;
max-width: 200px;
background: white;
padding: 23.3px;
margin-bottom:35px;
}
.product:hover {
transform: scale(1.1);
}
.product h3 {
padding: 10px 0 0 0;
text-align: center;
}
.product p {
text-align: center;
margin: auto;
max-width: 280px;
padding: 0;
font-size: 15px;
font-style: italic;
font-weight: 600;
}
.product img {
margin: auto;
max-width: 200px;
padding: 0;
}

Me estoy poniendo muy nervioso jajajaj no hay manera de poner esos malditos productos en horizontal como muestra el chaval del vídeo T_T

Tienes el html a la mano? o es wordpress?

Wizard dijo:

Tienes el html a la mano? o es wordpress?

Hacer clic para expandir...

Es wordpress compañero!

Vale, solo con el css es un poquito difícil ver el comportamiento de los elementos, tal vez cambiando la dirección del flex los coloques en horizontal, prueba cambiar:

flex-direction: row; por flex-direction: column;

Ya lo he intentado y siguen en vertical 😥

Lo voy a hacer mas fácil, hasta que consiga la API de amazon.

A ver si podéis ayudarme 🙂

Lo hare manualmente con el codigo que da Amazon por defecto con Texto + Imagen, pero ¡DE NUEVO! tengo el mismo problema... Me los pone en vertical y yo los quiero en horizontal!

<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-eu.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=oriol25loma-21&language=es_ES&o=30&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B07RLYM3TJ&linkId=aa6092bbb98c1205f61d93cedd26ce4d"></iframe> (Este es el código que mostraría el recuadro con el producto y texto...) ¿Como puedo añadir otro de estos al lado?

Llevo toda la tarde intentandolo y no hay manera....

Como es posible que algo que a priori parece tan sencillo se pueda convertir en misión imposible 😵😵😵😵😵

Eureca!!!!!! Ya lo he solucionado 🙂 Después de una larga y dura batalla con el editor de html, ¡VENCÍ!

HTML

<div id="random">
<div class='img-container'>
(Aquí pongo el codigo html que te da Amazon)
</div>
<div class='img-container'>
(Aquí pongo el codigo html que te da Amazon)
</div>
<div class='img-container'>
(Aquí pongo el codigo html que te da Amazon)
</div>
</div>

CSS

#random{
max-width: 650px
}

#random img{
width:80px;
}

.img-container{
display: inline-block;
}

Poniendo esto, te pone los productos en horizontal 🙂 Lo dejo por aquí, por si puede ser de ayuda a alguien mas.