Product Table not responsve

-- url of the page with the problem -- : magnet.com.au/rare-earth-magnets-neodymium-blocks.html
-- HikaShop version -- : HikaShop Business: 2.1.3
-- Joomla version -- : 3.1.5
-- PHP version -- : 5.3.27
-- Browser(s) name and version -- : all

Hi, For some reason the product tables are not being responsive and are not resizing to the smaller widths.

See here:
magnet.com.au/rare-earth-magnets-neodymium-blocks.html

It appears that the product image size is some how/where fixed and not resizing - thus pushing the RHS of the table off the page and under the menu.

Any hints on this Greatly appreciated.

Hi,

I think that the problem is coming from your template, so you should probably use some CSS code like Media queries properties.

Hi Mohamed, thanks for reply

Template (which I use on several sites) is responsive.

Also, if you look at:
Category view
magnet.com.au/rare-earth-magnets-neodymium.html
and
Product View:
magnet.com.au/300/ferrite-pot-magnet-40mm-x-8mm

They display responsive but the Product Table is not so I must be Hikashop template that is creating the problem.

Any thoughts to correct?

ok...

I turned off frontend custom css and it is back to being reponsive. (I should have done that originally) and it has restored some responsiveness BUT

The product image in the table is not resizing as it should.

Any suggestions?

Hi,

You have to edit the view "product / listing_table" and change the size for the image part.
Actually it's set in "px" so, it's not responsive.

By default a table is not really adapted for the responsive designs.

Hi Xavier, thanks for your reply, greatly appreciated.

I looked into that file and cannot see any actual pixel dimensions for image/s, but I did find a reference to px here.

<?php if($this->config->get('thumbnail')){ ?>
<td class="hikashop_product_image_row">
<div style="height:<?php echo $divHeight;?>px;text-align:center;clear:both;" class="hikashop_product_image">
<div style="position:relative;text-align:center;clear:both;width:<?php echo $divWidth;?>px;margin: auto;" class="hikashop_product_image_subdiv">

What needs to be edited here?

ok...

Changed px to %.
Change image size (in config) to 100x1oo

Looks like it is resizing but will need to tweak other things affected by the 100 x 100 size that is rendering as px.

Ok,

I think I have it:

magnet.com.au/

The % seems to work... still a few glitches but I think that is the appreoach.

Thanks.

Hi,

Yes they must work
But you have to check if there is no more "px" in the parent containers.

Thanks Xavier,

ok.. here is my challenge...

if I set % for table display images, then the images will take on the dimension set in configuration, correct?

So if I set images dimension to 145 x 145, the image in the table will be 145 x 145%

So if I set images to 100 x 100, they display and resize perfectly.. BUT .. in the front category display (div) they are VERY small.

How can I have them display properly in both?

Is there a way to modify $divWidth;?>%; so I can force it to only be 66% in that instance?

So with that, a 150 x 150 image would display at 100 wide.

You can let the parameters as default, and in listing_table set a width which will override the value of the config.
It can be done too via css, just apply the modifications on the good classes and force your css property thanks to "!important".

www.hikashop.com/support/documentation/1...ize-the-display.html