Problem with products/row

[Tryer]

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

[hotrod]

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

   

Code Select Expand

    .width33 {
        width: 33% !important;
    }

Also...No reason you can't put that to PHP 8

[Tryer]

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.

[hotrod]

That is the whole code .. two lines  I'm sure there is a way for you to make a custom css file

[Tryer]

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?

[iWim]

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

[Tryer]

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?

[hotrod]

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

[Tryer]

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.

[hotrod]

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

[Tryer]

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.

[hotrod]

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

[Tryer]

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.

[hotrod]

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.   

[GJC Web Design]

without a link to the life site and products no one can know...