News:

You may pay someone to create your store, or you visit our seminar and become a professional yourself with the silver certification

Main Menu

Template problem after update to J4

Started by cvrak, March 08, 2023, 12:10:17 PM

Previous topic - Next topic

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).
Kelvyn
Lowestoft, Suffolk, UK

Retired from forum life November 2023

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

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

GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

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?


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).

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

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

GJC Web Design

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

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

GJC Web Design
VirtueMart and Joomla Developers - php developers https://www.gjcwebdesign.com
VM4 AusPost Shipping Plugin - e-go Shipping Plugin - VM4 Postcode Shipping Plugin - Radius Shipping Plugin - VM4 NZ Post Shipping Plugin - AusPost Estimator
Samport Payment Plugin - EcomMerchant Payment Plugin - ccBill payment Plugin
VM2 Product Lock Extension - VM2 Preconfig Adresses Extension - TaxCloud USA Taxes Plugin - Virtuemart  Product Review Component
https://extensions.joomla.org/profile/profile/details/67210
Contact for any VirtueMart or Joomla development & customisation

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

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

cvrak

I tried the following:

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

Its working. Do you think its the correct solution?

Thanks