seperate category view for mobile?

[Fallen28]

setting categories per row on backend effects mobile view as well, instead of getting 2 categories per row on mobile, the row wraps and we get 2 on top and 1 below, then 2 again, instead of being uniformally 2 like expected, is this a template issue and do i need to create an override? do i need to touch core virtuemart views? or will css suffice? help me

virtuemart 4.0.10 10767
joomla 4.2.4

[jenkinhill]

We have to guess what template you are using? It may be that you just need to use some conditional CSS changes possibly in conjunction with editing an existing override or creating a new one if you don't already have overrides in place.

A live site URL would help.

[Fallen28]

i'm using cassiopeia on an empty site and empty store, i want to tackle these issues before i build the actual shop, setting the categories per row to 2 fixes mobile, but then desktop goes to 2 as well, i looked at categories.php sublayout, obviously columns per row are calculated by php code and not pure css, i tried removing those lines manually but not knowing what to write there instead, broke the category page to the point it 404'd

mobile view in attachment

[Fallen28]

ok, how do i completely remove row control from virtuemart's backend (categories per row setting) and turn it to a responsive layout with css?

alternatively, if there's an extension or plugin that can do this for me, please let me know

[hazael]

This is exactly the problem I was talking about before
https://forum.virtuemart.net/index.php?topic=149115.msg532313#msg532313

It's best to modify the code of the default Virtuemart template in the file:
com_virtuemart/sublayouts/products.php
and
com_virtuemart/sublayouts/categories.php

You should remove the row separators ( <div class="horizontal-separator"></div>)
Display products in flex-wrap:wrap layout. Each quantity in the product row will be based on the width of the screen.
Subsequent products will be automatically moved to the next row

But it will be best if you show the address of your website and write what configuration of the template you have chosen in the Virtuemart settings

[Fallen28]

This is exactly the problem I was talking about before
https://forum.virtuemart.net/index.php?topic=149115.msg532313#msg532313

It's best to modify the code of the default Virtuemart template in the file:
com_virtuemart/sublayouts/products.php
and
com_virtuemart/sublayouts/categories.php

You should remove the row separators ( <div class="horizontal-separator"></div>)
Display products in flex-wrap:wrap layout. Each quantity in the product row will be based on the width of the screen.
Subsequent products will be automatically moved to the next row

But it will be best if you show the address of your website and write what configuration of the template you have chosen in the Virtuemart settings

im using default everything, using cassiopeia and 3 categories and products per row, out of the box... here:

[hazael]

This cassiopeia template has support for bootstrap 5.
Change in virtuemart "Layout Bootstrap version" from legacy to bootstrap 3 or 4 or 5 and test each of these options

the number of odd products and categories in a row cannot be halved - in your case it is set to 3
If you don't have IT knowledge to modify the source code, I suggest you to change the display of categories and products in the row to even values ​​everywhere. i.e. if you have 3 everywhere change it to 4.

After change
If there are 4 in a row on the big screen, you will see 2 on the small screen and 1 on the smallest

[Fallen28]

This cassiopeia template has support for bootstrap 5.

i know, but virtuemart only shows bootstrap 3 correctly, 4 and 5 are selectable but broken when selected, i don't know if this is a virtuemart issue or cassiopeia issue, they work on seperate css files unless i make overrides, and i'm not knowledgeable enough to manually update css to 5 because it looks like creating a unique php file for it is involved.

the number of odd products and categories in a row cannot be halved - in your case it is set to 3
If you don't have IT knowledge to modify the source code, I suggest you to change the display of categories and products in the row to even values ​​everywhere. i.e. if you have 3 everywhere change it to 4.

my plan is this, i'm working on removing any php functions and statements related to row calculations, so the backend control for items per row has no effect, then like you described in that other thread... use flexbox to wrap items according to viewport/screen size, i know @media tags in css let me choose different settings for different screen resolutions, i'm thinking width33.3% for desktop and width:50 for mobile with obvious spacing and padding where needed, but i'll tackle css when i get to it

[hazael]

Yes. Flexbox in css will be the best choice - it will adjust to any screen width.
If you like experimentation I recommend changing this old Bootstrap to modern Uikit or Tailwind CSS

[Fallen28]

Yes. Flexbox in css will be the best choice - it will adjust to any screen width.
If you like experimentation I recommend changing this old Bootstrap to modern Uikit or Tailwind CSS

finally found how to seperate categories from virtuemart's stupid row control:

Code Select Expand


<?php
defined('_JEXEC') or die('Restricted access');

$categories = $viewData['categories'];

if ($categories) {

$ajaxUpdate = '';
if(VmConfig::get ('ajax_category', false)){
$ajaxUpdate = 'data-dynamic-update="1"';
}
?>


<?php 

// Start the Output
    foreach ( $categories as $category ) {
        $caturl = JRoute::_ ( 'index.php?option=com_virtuemart&view=category&virtuemart_category_id=' . $category->virtuemart_category_id , FALSE);

          // Show Category ?>
        <h2>
          <a href="<?php echo $caturl ?>" title="<?php echo vmText::_($category->category_name) ?>" <?php echo $ajaxUpdate?> >
          <?php echo vmText::_($category->category_name) ?>
          <br />
          <?php // if ($category->ids) {
            echo $category->images[0]->displayMediaThumb('class="browseCategoryImage"',false);
          //} ?>
          </a>
        </h2>
    <?php
    }
  ?>

</div>
<?php
 } ?>


experimented with taking out expressions i thought were pointless for my needs, and added css through chrome's inspector, it works perfectly for me,
now all i have to do is make my media breakpoints and code them accordingly, will update on progress

thanks a ton for your help

[Fallen28]

ohhhhhh, i'm sooooo soooo sooooo soooooo happy right now, i did it!!!!!!!!!!!!!!!!!!!!!!!!

[edit] i f'd up product view
[edit2] ok, upon further inspection, product view is bad when custom fields are involved, need to tackle this issue too now

now on to rebuild cart for mobile