products (grid or carousel) VC element responsiveness at 2 columns setting
-
Hi,
is it possible not to break the 2 columns setting of the products grid VC element on mobile devices?
I want it, if possible, to stay 2 columns just as the 3 or 4 columns settings apply.
not like this:http://prntscr.com/kokzpx
but like this:http://prntscr.com/kokzzv
Kind regards
Chrysovalantis
Hello,
Please add this code to the Theme setting > Custom CSS > Mobile
.elements-grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.elements-grid .product-grid-item {
max-width: 50%;
-webkit-box-flex: 1;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
}
Best Regards
Hello,
the css you have send me seems to work on the google chrome developer tools screen (http://prntscr.com/koyk1p), but when browsing on an real iPhone 5s device I am getting this: http://prntscr.com/koyl7p
Also the same results on the default shop page:http://prntscr.com/koyiz1
Kind regards
Hello,
Please replace the code with this one:
.elements-grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.elements-grid .product-grid-item {
width: 50%;
max-width: 50%;
-webkit-box-flex: 1;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
}
If there any problems with the code please provide admin access
Best Regards
Hello,
the problem is still not solved.
Kind regards
Hello,
Please provide your site admin access.
Best Regards
I am sending you in the private content the login data
Kind regards
Hello,
Please replace the snipped with this one:
.elements-grid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.elements-grid .product-grid-item {
width: 49.5%;
max-width: 49.5%;
-webkit-box-flex: 1;
-ms-flex: 1 1 49.5%;
flex: 1 1 49.5%;
}
Best Regards
You are welcome! If you have any questions please feel free to contact us.
Best Regards
The topic ‘products (grid or carousel) VC element responsiveness at 2 columns setting’ is closed to new replies.
.
