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
Maybe Bootstrap issue? Try changing the bootstrap version in VM Configuration/Templates. Start with None (legacy).
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
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?
Quote from: jenkinhill on March 08, 2023, 13:39:41 PM
Maybe Bootstrap issue? Try changing the bootstrap version in VM Configuration/Templates. Start with None (legacy).
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
Quote from: GJC Web Design on March 08, 2023, 18:37:47 PM
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
This depends entirely on your template... and over rides
but simplest is just fix it as suggested .. css is just css
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
Quote from: GJC Web Design on March 10, 2023, 11:36:28 AM
This depends entirely on your template... and over rides
but simplest is just fix it as suggested .. css is just css
I tried the following:
.vm-col-4 {
width: 25%;
display: flex;
}
Its working. Do you think its the correct solution?
Thanks