Ik ben aan het testen met aanpassingen voor mobiele weergave. Ik heb 2 producten per rij bij een breedte van 360px.
Bij .product-thumb heb ik de breedte van de producten aangepast (min-width: 165px;)
Het resultaat hiervan is dat de meeste lege ruimte nu wel gebruikt wordt. Echter lukt het mij niet om ook lege ruimte rechts van het product te krijgen zodat de producten recht onder het menu staan.
Kan ik dit aanpassen in de stylesheet? Indien ja, waar. Als ik het ergens anders moet aanpassen dan wat en waar? Ik wil de categorie balk etc. zelf niet breder maken.
Code uit mijn stylesheet.
Code: Select all
@media screen and (device-width: 360px) {
.product-list .product-thumb .image {
float: left;
padding: 0 0px;
}
.product-thumb h4 {
font-weight: bold;
text-align: center;
min-height: 35px;
max-height: 35px;
}
.product-thumb {
border: 1px solid #ddd;
margin-bottom: 20px;
overflow: auto;
border-radius: 6px 6px 6px 6px;
border-style: dashed dashed solid dashed;
[b]min-width: 165px;[/b]
margin: 5px;
padding: 0px;
min-height: 386px;
max-height: 1000px;
}
.product-thumb .button-group {
border-top: 1px solid #ddd;
border-bottom: 0px solid #ddd;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
background-color: #eee;
overflow: auto;
}
.product-thumb .caption {
padding: 0 20px;
min-height: 190px;
text-align: center;
}
.product-list .product-thumb .caption {
margin-left: 230px;
min-height: 190;
max-height: 190;
}
.product-thumb .rating {
display: none;
padding-bottom: 6px;
}
body {
background-color: white;
}
}
Zoals te zien is er geen lege ruimte rechts van de producten en staan de producten niet mooi strak onder de menu bar.