With the help of another forum member (Tverhijen) I managed to create a mobile view for my own phone in the stylesheet.
CSS is very new for me and I am stuck with a few questions.
1. How do I get button-group (add to cart, wishlist, compare) to always display on the bottom of the product-thumb?
In order for the products to be aligned properly in this mobile view I in product-thumb have created a max-height and min-height. The products are now aligned perfectly, but since the products are aligned the button-group is no longer always at the bottom.
The below code is strictly for the view of my phone (galaxy s6) to test things out before totally messing up my entire stylesheet.
Code: Select all
@media screen
and (device-width: 360px)
and (device-height: 640px)
and (-webkit-device-pixel-ratio: 4) {
.product-list .product-thumb .image {
float: left;
padding: 0 15px;
}
}
.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;
min-width: 160px;
margin: 5px;
padding: 0px;
min-height: 386px;
max-height: 387px;
}
.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: visible;
display: block;
}
.product-thumb .caption {
padding: 0 20px;
min-height: 180px;
text-align: center;
}
.product-list .product-thumb .caption {
margin-left: 230px;
}
2. How do I properly use margin? (or whatever it is I should be using)
I now in this mobile view have no empty space on the right side of the products (grid, 2 products per row) while I have too much empty space between the products and on the left of the products. So far I failed to change this, so I think I am editing the wrong things in the wrong places.
Any help is highly appreciated!
Kind regards,
Bart