I've created conditional statements in the default.php files to enable mobile devices to show 3 columns instead of the default 4 (for desktops and laptops) as per the control panel.
But on some devices (iOS mainly) the 3 column display gets chopped up: I'll see 3 products (or category icons) on 1 row and then just 1 on the next row, followed by 3 on the row below it, and then 1 more alone underneath that.
a) does anyone have an idea why that is?
b) what does this line of code mean: $categories_per_row = VmConfig::get('homepage_categories_per_row', 3);
that's the original code without any changes on my part. Specifically, what does that "3" mean?
Its not only to reduce the columns or rows, you have to reduce the width / height of all parts, the containing div, etc
In your case the space for each product is to wide, three in a row is too wide to be displayed in one row,
the browser shift down cause of flloat: right to the next row.
Take care of the retina resolution too.. but overall its a css /layout-error for this specific device.
Use the mobile view of google chrome or Mozilla firebug with the aprpriate Userstring and display dimension to check where the error is.