Remove border from desktop view and also remove left & Right border from mobile

HI team,

I have enable the border grid element from theme option but i don’t want to show border on desktop view https://prnt.sc/m8hwwj and also I want to hide left & Right border on Mobile View https://prnt.sc/m8hx9h

Thanks

Hello,

Add this code to the Theme Settings > Custom CSS >

body .products-bordered-grid:not(.elements-list) .product {
    border-color: transparent;
}
body	.products-bordered-grid.elements-grid {
    border-left-color:  transparent!important;
}

If you will remove border from left and right on mobile you will get such a result http://prntscr.com/m8lr7g

That is why apply the provided code to mobile as well.

Best Regards

Okay so I think it will not be helpful, now I have disabled the border grid element from theme option and added border manually on mobile view using below CSS

.product-grid-item {
    border-right: 1px solid #eee;
    border-top: 1px solid #eee;
    margin-bottom: 0px !important;
}

Now tell me how do I hide this right side border https://prnt.sc/m8p4ds

Thanks

Hello,

If you want to remove the right border on mobile, use your code in the Theme Settings > Custom CSS > Mobile:

.product-grid-item {
    border-right: 1px solid transparent;
    border-top: 1px solid #eee;
    margin-bottom: 0px !important;
}

Best Regards

[Author]

Posts