I have recently upgraded my site from J3 to J4 - seemingly successfully - but find that the new version of VM (4.0.22) lists products and product categories in rows of 1 item - ie one above the other. The configuration of the template shows that there should be 3 items per row. Any comments would be appreciated.
VM v4.0.22
PHP 7.4.33
Joomla 4.3.3
I was told this was an issue with my template...Rocket Theme had me ad this code to my custom Css.. and it made it work just the way I wanted..
.width33 {
width: 33% !important;
}
Also...No reason you can't put that to PHP 8
Thanks for the reply. Updating to PHP 8.0 makes no difference but I am staying with PHP 7.4 because the upgraded Joomla 4 site is in a subdirectory of the live Joomla 3 site and Joomla 3 is apparently no compatible with PHP8.0 (it causes problems on the Joomla site.
I guess the css you were given is relevant only to your template but it might give some pointer. However, I can only see 2 lines and clicking the "Select" button does nothing - so basically I could not see it all.
That is the whole code .. two lines I'm sure there is a way for you to make a custom css file
Thanks for the reply. However, I cannot fix this problem.
Has anyone else experienced this probem ie one category per row and one product per row despite having both set to 3 per row?
The number of items on a row can be set at different locations.
And, just like in Joomla, menu items override defaults.
Check VM > Configuration > Tab: Templates, and/or
check your menu item > Tab: Virtuemart category view settings, and/or
check your menu item > Tab: Virtuemart subordinated category settings
Thanks for your reply. I checkd all these things and they all seem OK. I have been advised by someone who understands this situuation much better than me that Joomla's Bootstrap CSS overwrites VirtueMart's CSS. I don't know whether this is true. However, I am currently left with a version of my site, upgraded to Joomla 4 and VM 4.0.22, that I cannot use. I don't know where to go.
How can I force the product container size to reduce to33% so that 3 products display per row (as set in VM) and how can I reduce the product and product category header fonts to reduce from thei current sizes (60px) down to a much smaller size?
Find out how in your template css folder to creat a custom cas file .. and ad the code I posted. Our it may be different ..
Thanks. I have now done that, and the product categories are smaller and display 3 on a row as a result. However, the product containers are still far too big and hence one per row.
Also, the product category headings and product headings are 60px (far too big). At present, I cannot understand how to reduce the font sizes.
Thanks for replying, I appreciate it.
Im no pro at this trust me.. But I use firebug in firefox.. to inspect the css and change it as needed.. and add to my custom CSS... I use rocket theme.. and they have helped me learn that over the past 13 years... for all my sites..
I use firebug as well but I'm not very good at it. In this case it points to a CSS file that automatically generated. If it is edited, the changes are just lost later. From there, I am lost.
That is what the custom css file is for .. that overrides any code and is never touched in updates ..
Search how to create a custom css file for your template. And it will tell you were to put it .. and what to name it..
Mine has like 30 changes in it I can manipulate colors links, you name it
Thank you once again for the reply - I'm really stuck with this after several days of work on the problem.
I have a custom CSS file and have several items in it that work as intended. However, I cannot find where the product container width (or column width??) is controlled in the CSS. The width of the product categories container is reduced to 33% using :
.width33 {
width: 33% !important;
}
(kindly suggested by Hotrod) but it does not correct the width of the product containers - only the product category containers.
My question therefore remains: How can the width of the product containers be reduced to 33%? NB The number of products per row IS set to 3 in the VM configuration.
These settings ( in Images ).. gave me just want I wanted after adding the code.. not sure if it would be the same for you..
And replicate the layout I currently have on my live site.
without a link to the life site and products no one can know...
That doesn't look bad to me.. I would remove the custom fields and the add to cart.. search remove add to cart in cat page here. just make them click more info and get them to the products page... and do a language over ride and change product details to "more Info and Buying Options.. or something like that..
https://forum.virtuemart.net/index.php?topic=144228.msg510661#msg510661 ( remove add To Cart )