How to Set Column Display Based on Screen Size

  • Posts: 966
  • Thank you received: 11
  • Hikashop Business
1 year 2 months ago #355687

Hi there,

I would like to change the columns depending on the screen size. It seems that it's set at hkc-md-3 no matter what device you are on and the column is really large on some devices.

So how do I change the column size similar to bootstrap where you can make it, for example, col-lg-3 or col-md-4 or col-sm-6, etc...

Thanks!

Please Log in or Create an account to join the conversation.

  • Posts: 83007
  • Thank you received: 13400
  • MODERATOR
1 year 2 months ago #355703

Hi,

I suppose that you're talking about the number of columns of product listings.
Since you can configure the number of columns you want in the settings of your menu item / module, the class hkc-md-3 is generated dynamically by the code based on what you select in the interface.
This is done in the view file product / listing_div.php that you can edit via the menu Display>views.
There you can find this code:

<div class="hkc-md-<?php echo (int)$span; ?> hikashop_product hikashop_product_column_<?php echo $current_column; ?> hikashop_product_row_<?php echo $current_row; ?>"
If you want all your products listings to have col-lg-3 col-md-4 and col-sm-6 then you can change that line to something like this:
<div class="hkc-lg-3 hkc-md-4 hkc-sm-6 hikashop_product hikashop_product_column_<?php echo $current_column; ?> hikashop_product_row_<?php echo $current_row; ?>"
As you can see we based our classes off of bootstrap.

Please Log in or Create an account to join the conversation.

  • Posts: 966
  • Thank you received: 11
  • Hikashop Business
1 year 2 months ago #355775

Hi Nicolas,

Thanks and it works for the product listings.

How do I change the columns for the related products that is using the HikaShop Content Module? Because in the View in the front it is showing it as using listing_div.php. I would like the number of columns to be different for related products.

Thanks!

Please Log in or Create an account to join the conversation.

  • Posts: 83007
  • Thank you received: 13400
  • MODERATOR
1 year 2 months ago #355782

Hi,

Indeed, this listing_div view file is used for all the products listings, including the related products one.
So if you want your hard coded classes to dynamically change, you'll need to write some more complex code.
For example:

<?php 
$class = 'hkc-lg-3 hkc-md-4 hkc-sm-6';
if($span == 2) {
$class = 'hkc-lg-2 hkc-md-3 hkc-sm-4';
}
?>
<div class="<?php echo $class; ?> hikashop_product hikashop_product_column_<?php echo $current_column; ?> hikashop_product_row_<?php echo $current_row; ?>"
This means that based on the number of columns selected in your menu item / module, you can change the classes being used.
Here, you can see that it will use hkc-lg-3 hkc-md-4 hkc-sm-6 for all the products listings, except if the current number of columns is set to 2 in the settings, in which case it will use hkc-lg-2 hkc-md-3 hkc-sm-4
So it's up to you to adapt these based on what you need.

Please Log in or Create an account to join the conversation.

Time to create page: 0.058 seconds
Powered by Kunena Forum