U
Usuario eliminado 210163
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;
}
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;
}