2 column grid on all screens
-
Hello, I need the store’s product grid of my store to be seen in two columns on all screens. I have changed the theme options to be shown in two columns but in the iphone view only one column is shown. Can you help me?
Thanks.
Hi,
Try to add the following code snippet to the Mobile Custom CSS area in Theme Settings
.basel-products-holder {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.product-grid-item.col-xs-12 {
width: 50%;
max-width: 50%;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
}
.basel-products-holder > .clearfix {
display: none !important;
}
Regards
Sorry, but in iphone and ipad screen it displays like a picture I attached.
Attachments:
You must be
logged in to view attached files.
Try to add the following code snippet instead of previous one:
.basel-products-holder {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.basel-products-holder:after,
.basel-products-holder:before{
display: none;
}
.product-grid-item.col-xs-12 {
width: 50%;
max-width: 50%;
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
}
.basel-products-holder > .clearfix {
display: none !important;
}
Regards
.
