Home › Forums › WoodMart support forum › Product layout on mobile (category page) › Reply To: Product layout on mobile (category page)
September 26, 2022 at 5:17 pm
#408648
Elise Noromit
Member
Hello,
1. Please replace the code provided before for this one to add the border:
body .product-list-item .product-wrapper {
display: flex;
align-items: center;
flex-wrap: nowrap;
}
body .product-list-item .product-element-top {
flex: 0 0 30%;
margin-bottom: 0 !important;
margin-right: 15px;
}
body .product-list-item .product-list-content {
flex: 1 1 auto;
text-align: start;
}
body .product-list-item:not(:last-child) .product-wrapper {
padding-bottom: 30px;
border-bottom: 1px solid;
border-bottom-color: var(--brdcolor-gray-300);
}
2. It is not possible to insert your image, you can remove the text and leave the icon, please use this custom:
body .product-list-item .product-wrapper .wd-add-btn a {
width: 50px;
height: 35px;
}
body .product-list-item .product-wrapper .wd-add-btn-replace .add-to-cart-loop:before {
transform: translateY(0) translateZ(0);
}
body .product-list-item .product-wrapper .wd-add-btn a span {
display: none;
}
This custom would alight right:
body .product-list-item .product-wrapper .wd-add-btn {
text-align: right;
}
Best Regards