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

thanks,

problem solved!

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts