Page 1 of 1

Two columns on mobile devices

Posted: 16 Feb 2023, 21:59
by Nidzo
I suggest to create option to select number of columns of Categories View and Category and Items View in responsive view. Mobile devices are became primary in web surfing.
Currently it is very hard to achieve to display 2 columns on mobile devices.
I tried overrides, CSS adaptation etc. and without clear success.
Maybe I don't do in right way, I don't know. :x
If you can provide me changed files and CSS for Phoca Mebel template I would be grateful.

This is example what I want to achieve:
Image

This can be achieved only when the pair number of columns are selected. This is how looks 3 columns on mobile device:

Image

Re: Two columns on mobile devices

Posted: 18 Feb 2023, 19:41
by Jan
Hi, all this should be managed by Bootstrap class. You can define th column count for large display but in smaller displays, the count is resized to one.

Image

Image

To have another behaviour of columns, this library needs to be changed:
administrator/components/com_phocacart/libraries/phocacart/render/style.php

e.g.:
changing:
$s['c']['col.xs12.sm1.md1'] = 'col-12 col-sm-1 col-md-1';
to:
$s['c']['col.xs12.sm1.md1'] = 'col-6 col-sm-1 col-md-2';
(depends on used ouput, it is different to when e.g. 3 columns are displayed or 4 columns)

Image

Jan