Shop layout on the home page after update

[Gandy55]

After updating a site from Joomla 3.10.12 to 4.4.14 (PHP 8.3.29, MySQL 8.0.44-35, VM 4.4.4), the only problem I encountered after the upgrade was with the layout of the shop page on the home page. On j3, the layout is three vertical columns with three products per row, whereas on j4, it is a single, very long column of products.
I have dismantled and reassembled the site, repeating the procedure twice, but the result is always the same.
Do you have any suggestions?

Thanks
Andrea

[iWim]

What template do you use?

Is the template compatible with J4+?

To help you better we need to see what is happening.
Can you post the url of your webshop?

[Gandy55]

The template is InsightFX the last version 2.7.8. I use this template i other websites5.4.2 without problem but without VM. I use Gantry 5.5.19 because from 5.5.20 to 5.5.25 is compatible only with J4 or up.
This is the link to the site, but now it has been rebuilt with J3 and VM 4.4.4.

https://www.caseificiocanevaccia.eu/it/shop.html

[iWim]

The latest version for insightFX is 2.8.0 (3 January 2026).

The site in the url looks fine.
We need to see the code for the shop that has the issue.

[Gandy55]

Thank you for your attention.
Joomla 4.4.14 is installed at this URL, PHP is still 8.2 and MySQL is 8. VM 4.4.4
The problem is still the one described above.

https://www.caseificiocanevaccia.it/it/shop/view/category/virtuemart_category_id/0/virtuemart_manufacturer_id/0.html

Andrea

[iWim]

Thank you.

In the updated webshop Gantry loads a bootstrap5.css file.
In it there is a style that overrides the width of your columns.

I don't know Gantry, so I don't know if it's possible to turn off bootstrap.
If it's not possible, you can do 2 things:

1. Also set the VirtueMart layout to bootstrap5 (currently you use 'none')
Changing this will have effect if you have created overrides for VM. So you'll need to recreate them with the bs5-overrides. And it may have effect on the design elsewhere.

Go to VM Configuration > tab: Templates > Section: Template and Layout
Change Layout Bootstrap version from None (Use Legacy) to Bootstrap 5.

Or...
If you don't want to change the Layout in VirtueMart configuration.

2. Add a rule to your custom css file
Do note that Gantry bootstrap may have effected the design elsewhere too.

Look in Gantry/insightFX where to edit/add your custom css (check their docs, as I don't know Gantry)

Add the following code

Code Select Expand

.row .vm-col-3 {
  width: 33.333%;
}
Both options will quickly solve your issue here, but check the rest of the design too.