Changing number of columns in responsive display

-- url of the page with the problem -- :currently ofline
-- HikaShop version -- :HikaShop Business: 2.2.2
-- Joomla version -- : 3.1.5
-- PHP version -- : 5.3.1
-- Browser(s) name and version -- : Firefox 25.0.1
-- Error-message(debug-mod must be tuned on) -- : none

I am trying to build a responsive site and am using Joomla 3.1.5 with the Wright template framework which incorporates twitter bootstrap. I have a module published which show the newest products added to the shop and I can set the number of products displayed and the number of columns in the module configuration. I have set it to display four columns.

Currently if I reduce the screen width the the column widths reduce accordingly until such point as it jumps from four columns to a single column.

I am trying to achieve a more sophisticated behavior where the number of columns reduces at certain breakpoints. So as the screen width is reduced four columns narrow slightly then drop to three columns, then to two then one as the screen width is reduced.

Can you offer any suggestions as to how this might be achieved?

Many thanks,

Ian

You need to dynamically force the width of the DIVs with the class hikashop_product based on the width of the screen using the @media CSS element.
code-tricks.com/css-media-queries-for-common-devices/
For example: Of course, you need to adapt these px values based on how your template is made so that it switches from one mode to the other at the correct width.

That's brilliant, I think your code needs another closing brace for each media query but once I'd figured that out and tweaked the dimensions it works perfectly.

Top support once again.

Many thanks,

Ian

Hi Nicolas

I had used your code to implement the 2 column on responsive view

but there is some problem

the first row on responsive is 2 column indeed, but the second row become 1 column with product and 1 blank
thrid row display fine but fourth row problem with 1 blank column again

is that related to clear property?

Hi,

Yes. Probably because not all your elements have the same height.
We would need a link to the page you're talking about in order to analyze the situation and tell you what's going on.

Not about the height for this problem

We manage to resolve it by remove div style=clear:both in listing_div view and frontend css

I had the same problem and used a jquery equalheight script to set all the elements to the same height once the page loaded, you can see the effect of that on my site here ...

www.artistpapers.co.uk/shop

In my template head area load the javascript (attached) with...

There may be better solutions but that worked for me.

Ian

Install the latest version equal height

Specified class hikashop container and product name class (inspect element ti get the actual class name)

This should save the problem

We still face random problem after removing clear property

Please see screem shot below

See picture below for the float problem…

Hi,

Next version of HikaShop will actually contain a height equalizer javascript in order to do that without the need of jquery.

Dear Nicolas

Sorry that think we are far a bit from the question

MY problem above is related to height?

My display setting is using div with 3 column, however we need to remove the clear:both in order to have 2 column view with your code above in responsive view

but there are intermitten blank column as above

Hi,

My last answer to you still stands:

Hi,

Yes. Probably because not all your elements have the same height.
We would need a link to the page you're talking about in order to analyze the situation and tell you what's going on.

The height matters because of the way css floats work. In your screen shot the first item in the first row is taller than the one to it's right, so the third item floats against the bottom part of the first item. This then pushes the document flow down to the bottom of the third item so the fourth item floats left under that, leaving a space above. The only way I found to resolve it , as has been said, is to use javascript to make them equal height then they all line up nicely. Another option would be to use javascript to lay them out so there are no gaps ( like Pinterest ), but I preferred the equal height approach.

Ian