ZCA Bootstrap 4 Template [Support Thread]

[swguy]

How can I have two cards per row on mobile? I have tried fiddling with $grid_classes_matrix but that doesn't seem to be what's needed.

[keneso]

How can I have two cards per row on mobile? I have tried fiddling with $grid_classes_matrix but that doesn't seem to be what's needed.

With this I see two per row

'10' => 'row-cols-2 row-cols-md-2 row-cols-lg-3 row-cols-xl-4',
'8' => 'row-cols-2 row-cols-md-2 row-cols-lg-3 row-cols-xl-4',
'6' => 'row-cols-2 row-cols-md-2 row-cols-lg-3 row-cols-xl-4',

[swguy]

Thanks - this gives two per row on the index listing pages (/index.php?main_page=index&cPath=2_82) but not two per row for the centerboxes on the front page, which is what I was hoping to get.

(Sorry, I realize now that my original request didn't specify this detail.)

[lat9]

Thanks - this gives two per row on the index listing pages (/index.php?main_page=index&cPath=2_82) but not two per row for the centerboxes on the front page, which is what I was hoping to get.

(Sorry, I realize now that my original request didn't specify this detail.)

The products/row on those centerboxes are controlled by the various (e.g. featured, special, new) per-row counts present in Configuration :: Product Info. For instance, the new-products/row is controlled by SHOW_PRODUCT_INFO_COLUMNS_NEW_PRODUCTS.

[swguy]

Mobile seems to be stuck at 1. Yes, desktop and tablet home page centerbox products per row can be modified (I think it's configuration > Index listing though) but mobile always seems to let a single column take 100% of the width.

This is the home page centerboxes only - other index pages seem to be controlled using the grid as noted above.

[lat9]

Mobile seems to be stuck at 1. Yes, desktop and tablet home page centerbox products per row can be modified (I think it's configuration > Index listing though) but mobile always seems to let a single column take 100% of the width.

This is the home page centerboxes only - other index pages seem to be controlled using the grid as noted above.

When you say mobile, what viewport width are you referring to?

[swguy]

I am using the Chrome simulator with iPhone 6/7/8, and that is 375x667. (Right click, Inspect, select device type.). Same for other phones - Pixel 2, Nexus 4, etc.

When I go to https://vinosdefrutastropicales.com/zc157_bs4/ and do this I see 1 item per row in the new products centerbox as shown in the attached image.

[lat9]

With this I see two per row

'10' => 'row-cols-2 row-cols-md-2 row-cols-lg-3 row-cols-xl-4',
'8' => 'row-cols-2 row-cols-md-2 row-cols-lg-3 row-cols-xl-4',
'6' => 'row-cols-2 row-cols-md-2 row-cols-lg-3 row-cols-xl-4',

That's it! Edits to your clone's /includes/modules/bootstrap/product_listing.php's $grid_classes_matrix array.