css - Joomla Virtuemart category mobile layout -

i trying resolve problem day , found solution, not imagine , have, reaching greater , smarter minds here :)

i have web shop showing 1 product per row on mobile layout, here:

enter image description here

but see 2 in row. now, problem: in configuration of virtuemart, showing products per row set 3, because see 3 products per row on computer , desktop devices (also laptops , bigger tablets), ok , works fine.

but on mobile devices, in template mobile.css set show 1 in row.so searched , found code

.category-view .vm-col-3 

that set width: 100%

when insert 50% this:

enter image description here

i insert clear: noneand float: leftnothing happened. figure out have find .row code, because see 3 products in row set in configuration, smaller , sorted this, still not like have.

then, found line sets row:

.category-view .browse-view .row 

and inserted line:

clear: none; float: left; width: 50%; 

with this, results closest, still not need. when ends 9 products, next 3 1 under (3 products) , again starts 2 in row , repeats after 9 products.

you can see here (with mobile phone): box2.appleoprema.com/index.php/iphone6-maskice-i-zastita

can tell me please, how fix this? have try many ways , codes figure out, , after 3 days don’t know anymore. in advance help.

hi there after having seems structure of container

row col-1 col-2 col-3 row etc...

so adding width: 50%; row messes because there 3 products assigned each row.

what can either have width: 33% .product.vm-col.vm-col-3 media="(max-width: 640px)" display 3 products per row or leaving column gets 100% of width showing 1 product per row.

if want have 2 products per row mobile display should either check in backend if there such option or tweak html of component/module using.