Home Forums WoodMart support forum Product layout on mobile (category page) Reply To: Product layout on mobile (category page)

#408648

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