Biggest Layout Flaw Ever

[gringo211985]

Hi there,

I'm having a problem with the category and product grid layout.

I use 3 products in a row, but when the site becomes responsive I want to display 2 products then 1 product respective of screen size.

The problem is this (see screenshot attached) the products are separated by rows and when it becomes 2 products per row there is a missing 4th product and it's displayed on another row underneath and this is repeated. This is a major layout flaw with VM and it's been like this for as long as I have used VM since 2 (it never really bothered me until now as I just used list mode before)

I have checked numerous 3rd party templates with grid layouts and this flaw is on every single template I checked.

What I think needs to be done is that instead of after x products it creates new row, just display all products in a block and let the number factor be the width.

Please can we get the devs on this asap as this is a simple basic functionality layout flaw effecting every single VM3 install.

Thanks,
Richard

[Studio 42]

HI,

Please use a PRO template or adjust the CSS.
I can give you 10 site using vm3 without any problem. This is only a CSS problem, not VM.
Eg. you can check my own site : http://shop.st42.fr/en/products this work perfect !

Stop to send private message for this. Pay a support if you don't know how to do.
Thanks for understand,

Patrick

[PRO]

I changed mine to not have rows.


I just modified the default 1 for you to remove the rows.

BUT! I will tell you, it does take a little extra css to get the responsive like you want.
Mine will go from 5 products per row. All the way to 1.

I have uploaded the default

sublayouts/products.php

[gringo211985]

Hi PRO,

Thank you very much for sending that through, it has indeed solved my solution. Which couldn't be solved with CSS, although I have tweaked my CSS so that there is a 3,2,1 effect.

Studio 42,

I'm sorry but this is a major flaw and VM out of the box should work like your site without any need for PHP work (my problem was php not css!) Anyone using Joomla as a CMS is because it's easy!!! Any shopping component out of the box should not have these errors for people using an odd amount of products per row!

If you have a work around via css or like mine with php then it needs implementing in the default VM component!!! I would also be interested to know how you achieved that with just css.

Everyone using vm with 3 products per row will get this problem! It's broken before you start, it's like buying a new car but it needs new brakes and steering column. (that would make it a broken car)

The VM official demo http://demo.virtuemart.net/wear has the exact same problem! No wonder I only use VM on one site, when you have to override and do so much to get basic functionality and styling.

Please use a PRO template or adjust the CSS. (it was fixed with php)

I can give you 10 site using vm3 without any problem. This is only a CSS problem, not VM. (vm demo has this problem ffs, it should work out the box. I can give you 10 examples of shopping carts that don't have this problem out of the box!)

Eg. you can check my own site : http://shop.st42.fr/en/products this work perfect ! (doesn't help me or anyone else using vm)

Stop to send private message for this. Pay a support if you don't know how to do.
Thanks for understand, (sorry but this needs addressing in the core of vm, not for every site that uses 3 products per row on an individual basis! no way should I pay a support person to do something that should be in the core! how about the devs fix the component to work properly rather than blaming the end users skills and I am more than happy to pay when I feel it requires payment, I paid $499 for mijoshop, but this is core functionality that is broken and thus does not warrant payment to anyone as it should be fixed from vm devs for everyone)

Now rather than arguing about this can we get an update for vm component resolving this issue, because like I said this is the most basic functionality and it is a major flaw in the vm component which everyone who is using vm and odd amounts of products will be facing. This issue is bigger than me or you lol 

Thanks,
Richard

[Studio 42]

Sorry for answer,

But i'm not a core developper anymore sinnce 2013, i only help the developer and the user (but i cannot add directly changes) and i don't get money back for vm team to provide support.

I give answer for all people, but i cannot do free personal support.

The problem for some CSS for product in category is know since more then 2 months. I'm not the code commiter and do not have last word.

The current official list(not updated) of team is here : https://dev.virtuemart.net/projects/virtuemart/

greets,

Patrick

[gringo211985]

Hi Studio 42,

I'm sorry, please accept my apology, I didn't realise that you weren't part of the vm dev team. That also means I owe you a bigger thank you for the help in the other posts 

I hope one of the current vm dev team pick this up and sort this out as surely you have to admit that this should not be happening in the default install of vm set to odd amount of products.

I just wish things would be smoother for vm and less customization is needed. I offered to write them a new vm-site-ltr.css to remove the broken styling and to give users an easier start by removing all of the stupid gradients and images that slow down the site by adding unnecessary css and then even more in the custom.css to override it. The dev team never went ahead with that and I always thought it was a bit strange as I was offering to make it better for free.

Thanks again for helping me out, especially seeing as you didn't have to 
Richard

[Studio 42]

+1 to remove 80% of the rules in the CSS!
This break many design in Joomla 3(i correct or remove all weeks vm styles)

[StefanSTS]

Hi,

there is a quite simple solution to the problem, that I use on my site for a maximum of four products per row.

Change the products per row to 12. 12 can be divided by 4, 3, 2 and 1.

Give the width of the product containers in CSS as 25%. Add a min-width and a max-width according to your layout.

For smaller devices you can set the width in your css via media query to 33.33%, then 50% and finally 100%.

Works fine for me. No hacks needed, simple CSS and a setting in the config.

The VirtueMart core uses rows to generate the view, that might change in future, but it will also break the view for the "old" templates. So that will be a lot of work to adjust it properly. Guess the devs have some other priorities at the moment.

If you have a good template, your view changes automatically from 3 to 1 products per row. If you want it like 4, 3, 2, 1, you have to learn a bit of CSS or pay somebody to do it. Nothing in this world is free, the minimum will be, that it costs some time.

So long
Stefan

[Studio 42]

Hi Stefan,

The row system is not in cause.
But some CSS rules added in last release(vm3.0??),a sort of mix of responsive css.
Why adding min-width in pixels? This only work for some cases, if you do not define media queries and don't check for number of rows.

[gringo211985]

+1 to remove 80% of the rules in the CSS!
This break many design in Joomla 3(i correct or remove all weeks vm styles)

Yeah it would be about 100 times better with a simple clean vm-site-ltr.css but I guess the devs weren't interested in having me write one.