Template problem after update to J4

[cvrak]

Hi,
I've updated a J3.10 eshop to J 4.2.8, all extensions including VM.
I face a problem regarding the display of products category. Before the joomla update I've set 3 products per row. After update (without changing anything) I see only 1 product per row. This is not possible to change it, eventhough I've tried to set 3 products/row for every category.
Any suggestions?
You can see what I mean at https://bit.ly/3IZ7kr9 (Its in Greek)

Joomla 4.2.8
VM 4.0.12.10777
php 8.1.16

Thanks
Chris

[jenkinhill]

Maybe Bootstrap issue? Try changing the bootstrap version in VM Configuration/Templates. Start with None (legacy).

[GJC Web Design]

yes.. you have bootstrap 5 chosen which is over riding the vm definitions

it u add

.vm-col-4 {
    width: 25% !important;
}

etc to your overrides this fixes it

or as Jenks says experiment with different BootS

[cvrak]

Yes, probably that was te issue. The problem appears eventhough None (legacy) was selected.
Which Bootstrap version should be used for J4 and VM last version?

Maybe Bootstrap issue? Try changing the bootstrap version in VM Configuration/Templates. Start with None (legacy).

[cvrak]

Regarding Bootstrap I have selected None (legacy). If I select another version the coloumns are ok but +/- buttons are not present.
I've added your suggested override and the template is ok.
But, is it the correct method? Everything was working ok before the upgrade to J4
Regarding a clean installation with J4 and VM last version which do you think is the correct Bootstrap version?

Thanks
Chris

yes.. you have bootstrap 5 chosen which is over riding the vm definitions

it u add

.vm-col-4 {
    width: 25% !important;
}

etc to your overrides this fixes it

or as Jenks says experiment with different BootS

[GJC Web Design]

This depends entirely on your template... and over rides

but simplest is just fix it as suggested .. css is just css

[cvrak]

The suggested css rule works ok in desktop but I've checked in mobile this morning and the page is not displaying ok.
The "!important" forces to display 4 products/row and is not ok.
How can I solve this?

Thanks
Chris

This depends entirely on your template... and over rides

but simplest is just fix it as suggested .. css is just css

[cvrak]

I tried the following:

.vm-col-4 {
    width: 25%;
  display: flex;
}

Its working. Do you think its the correct solution?

Thanks