Hi,
Did you add your own custom CSS modifying .prod-cat-container?
Try:
@media only screen and (max-width: 480px){
.prod-cat-container{
width:100%;
}
}
hi,
yes i did custom css on my my catalog. i removed the side bar on the left and i want to display 4 column of my product inside the pink color box.
so add this code:
.prod-cat-inner, .prod-cat {
width: 1110px;
}
after i removed this code, it is now ok to display in mobile and tablet. but again it just showing 3 column of my product when i open from computer and left so much margin on the right side.
so can you help me so i can arrange the product become 4 column with same margin on the left and right?
Thanks
hi,
i solve the problem,
I put this code on style.css of my theme
.prod-cat-inner {
width: 1110px;
}
to make my product become 4 column. and to make the left and right margin the same i add on my theme style.css
.prod-cat-inner {
text-align: center;
}
.upcp-thumb-item {
display: inline-block!important;
float: none!important;
}
and to make it is display properly in mobile i put this code on my theme style.ccs
@media (max-width: 480px){
.prod-cat-inner{
width:100%;
}
}
Hi,
almost perfect as i wanted.
how to make the price to be in the middle just under the name of the product?
Thanks,
Hi atharazka,
This should do the trick. Let us know if there are any other changes you would like help with!
#prod-cat-2 {
width: 85%;
margin: 0 auto;
}
.upcp-thumb-item {
float: left;
}
.upcp-thumb-price {
float: none;
margin: 0 auto;
}
Regards,
