[Skip to main content](#vessel-content) # Changing number of columns in responsive display ## - **[iedwards](/forum/user/12400-iedwards "View iedwards's Profile")** - [![iedwards's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/12400-iedwards "View iedwards's Profile") Topic Author - [ Offline](/forum/user/12400-iedwards) Less More - Posts: 250 - Thank you received: 7 - [](http://www.estm.co.uk) - 12 years 11 months ago [\#134401](#134401) by [iedwards](/forum/user/12400-iedwards "View iedwards's Profile") *[Changing number of columns in responsive display](/forum/26-product-category-display/863951-changing-number-of-columns-in-responsive-display#134401 "-- 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")* was created by *[iedwards](/forum/user/12400-iedwards "View iedwards's Profile")* -- 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 --- [ Ian Edwards Film Sound Recording](https://estm.co.uk) [ Alveley Mining Heritage](https://alveleyminingheritage.org) [ Mary Edwards-Porter - Author](https://www.mary-edwards-porter.co.uk) Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjM5NTEtY2hhbmdpbmctbnVtYmVyLW9mLWNvbHVtbnMtaW4tcmVzcG9uc2l2ZS1kaXNwbGF5P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More - Posts: 86292 - Thank you received: 14270 - - 12 years 10 months ago - 12 years 10 months ago [\#134468](#134468) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Changing number of columns in responsive display](/forum/26-product-category-display/863951-changing-number-of-columns-in-responsive-display#134468 "-- 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/](http://code-tricks.com/css-media-queries-for-common-devices/) For example: Code: @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { .hikashop_product{ width: 33% !important; }//3 columns } @media only screen and (min-device-width : 385px) and (max-device-width : 768px) { .hikashop_product{ width: 49% !important;} //2 columns } 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. Last edit: 12 years 10 months ago by [nicolas](/forum/user/63-nicolas "View nicolas's Profile"). The following user(s) said Thank You: [iedwards](/forum/user/12400-iedwards "View iedwards's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjM5NTEtY2hhbmdpbmctbnVtYmVyLW9mLWNvbHVtbnMtaW4tcmVzcG9uc2l2ZS1kaXNwbGF5P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[iedwards](/forum/user/12400-iedwards "View iedwards's Profile")** - [![iedwards's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/12400-iedwards "View iedwards's Profile") Topic Author - [ Offline](/forum/user/12400-iedwards) Less More - Posts: 250 - Thank you received: 7 - [](http://www.estm.co.uk) - 12 years 10 months ago [\#134574](#134574) by [iedwards](/forum/user/12400-iedwards "View iedwards's Profile") Replied by *[iedwards](/forum/user/12400-iedwards "View iedwards's Profile")* on topic *[Changing number of columns in responsive display](/forum/26-product-category-display/863951-changing-number-of-columns-in-responsive-display#134574 "-- 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")* 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 --- [ Ian Edwards Film Sound Recording](https://estm.co.uk) [ Alveley Mining Heritage](https://alveleyminingheritage.org) [ Mary Edwards-Porter - Author](https://www.mary-edwards-porter.co.uk) Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjM5NTEtY2hhbmdpbmctbnVtYmVyLW9mLWNvbHVtbnMtaW4tcmVzcG9uc2l2ZS1kaXNwbGF5P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[ler@singmuiheng.com](/forum/user/3330-ler-singmuiheng-com "View ler@singmuiheng.com's Profile")** - [![ler@singmuiheng.com's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/3330-ler-singmuiheng-com "View ler@singmuiheng.com's Profile") - [ Offline](/forum/user/3330-ler-singmuiheng-com) Less More - Posts: 575 - Thank you received: 11 - - 11 years 2 months ago [\#212092](#212092) by [ler@singmuiheng.com](/forum/user/3330-ler-singmuiheng-com "View ler@singmuiheng.com's Profile") Replied by *[ler@singmuiheng.com](/forum/user/3330-ler-singmuiheng-com "View ler@singmuiheng.com's Profile")* on topic *[Changing number of columns in responsive display](/forum/26-product-category-display/863951-changing-number-of-columns-in-responsive-display#212092 "-- 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")* 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? Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjM5NTEtY2hhbmdpbmctbnVtYmVyLW9mLWNvbHVtbnMtaW4tcmVzcG9uc2l2ZS1kaXNwbGF5P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More - Posts: 86292 - Thank you received: 14270 - - 11 years 2 months ago [\#212132](#212132) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Changing number of columns in responsive display](/forum/26-product-category-display/863951-changing-number-of-columns-in-responsive-display#212132 "-- 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")* 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. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjM5NTEtY2hhbmdpbmctbnVtYmVyLW9mLWNvbHVtbnMtaW4tcmVzcG9uc2l2ZS1kaXNwbGF5P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[ler@singmuiheng.com](/forum/user/3330-ler-singmuiheng-com "View ler@singmuiheng.com's Profile")** - [![ler@singmuiheng.com's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/3330-ler-singmuiheng-com "View ler@singmuiheng.com's Profile") - [ Offline](/forum/user/3330-ler-singmuiheng-com) Less More - Posts: 575 - Thank you received: 11 - - 11 years 2 months ago [\#212141](#212141) by [ler@singmuiheng.com](/forum/user/3330-ler-singmuiheng-com "View ler@singmuiheng.com's Profile") Replied by *[ler@singmuiheng.com](/forum/user/3330-ler-singmuiheng-com "View ler@singmuiheng.com's Profile")* on topic *[Changing number of columns in responsive display](/forum/26-product-category-display/863951-changing-number-of-columns-in-responsive-display#212141 "-- 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")* 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 Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjM5NTEtY2hhbmdpbmctbnVtYmVyLW9mLWNvbHVtbnMtaW4tcmVzcG9uc2l2ZS1kaXNwbGF5P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[iedwards](/forum/user/12400-iedwards "View iedwards's Profile")** - [![iedwards's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/12400-iedwards "View iedwards's Profile") Topic Author - [ Offline](/forum/user/12400-iedwards) Less More - Posts: 250 - Thank you received: 7 - [](http://www.estm.co.uk) - 11 years 2 months ago - 11 years 2 months ago [\#212143](#212143) by [iedwards](/forum/user/12400-iedwards "View iedwards's Profile") Replied by *[iedwards](/forum/user/12400-iedwards "View iedwards's Profile")* on topic *[Changing number of columns in responsive display](/forum/26-product-category-display/863951-changing-number-of-columns-in-responsive-display#212143 "-- 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")* 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 ... [ ](https://www.artistpapers.co.uk/shop)[ www.artistpapers.co.uk/shop](https://www.artistpapers.co.uk/shop) In my template head area load the javascript (attached) with... Code: <script type="text/javascript" src="/your_path/jquery.equalheight.js"></script> <script type="text/javascript"> jQuery(window).load(function() { jQuery(function(){ jQuery('.hikashop_subcontainer').equalHeight(); }); }); </script> There may be better solutions but that worked for me. Ian *This attachment is hidden for guests. Please log in or register to see it.* --- [ Ian Edwards Film Sound Recording](https://estm.co.uk) [ Alveley Mining Heritage](https://alveleyminingheritage.org) [ Mary Edwards-Porter - Author](https://www.mary-edwards-porter.co.uk) Last edit: 11 years 2 months ago by [iedwards](/forum/user/12400-iedwards "View iedwards's Profile"). The following user(s) said Thank You: [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjM5NTEtY2hhbmdpbmctbnVtYmVyLW9mLWNvbHVtbnMtaW4tcmVzcG9uc2l2ZS1kaXNwbGF5P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[ler@singmuiheng.com](/forum/user/3330-ler-singmuiheng-com "View ler@singmuiheng.com's Profile")** - [![ler@singmuiheng.com's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/3330-ler-singmuiheng-com "View ler@singmuiheng.com's Profile") - [ Offline](/forum/user/3330-ler-singmuiheng-com) Less More - Posts: 575 - Thank you received: 11 - - 11 years 2 months ago [\#212145](#212145) by [ler@singmuiheng.com](/forum/user/3330-ler-singmuiheng-com "View ler@singmuiheng.com's Profile") Replied by *[ler@singmuiheng.com](/forum/user/3330-ler-singmuiheng-com "View ler@singmuiheng.com's Profile")* on topic *[Changing number of columns in responsive display](/forum/26-product-category-display/863951-changing-number-of-columns-in-responsive-display#212145 "-- 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")* 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 Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjM5NTEtY2hhbmdpbmctbnVtYmVyLW9mLWNvbHVtbnMtaW4tcmVzcG9uc2l2ZS1kaXNwbGF5P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[ler@singmuiheng.com](/forum/user/3330-ler-singmuiheng-com "View ler@singmuiheng.com's Profile")** - [![ler@singmuiheng.com's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/3330-ler-singmuiheng-com "View ler@singmuiheng.com's Profile") - [ Offline](/forum/user/3330-ler-singmuiheng-com) Less More - Posts: 575 - Thank you received: 11 - - 11 years 2 months ago [\#212161](#212161) by [ler@singmuiheng.com](/forum/user/3330-ler-singmuiheng-com "View ler@singmuiheng.com's Profile") Replied by *[ler@singmuiheng.com](/forum/user/3330-ler-singmuiheng-com "View ler@singmuiheng.com's Profile")* on topic *[Changing number of columns in responsive display](/forum/26-product-category-display/863951-changing-number-of-columns-in-responsive-display#212161 "-- 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")* We still face random problem after removing clear property Please see screem shot below Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjM5NTEtY2hhbmdpbmctbnVtYmVyLW9mLWNvbHVtbnMtaW4tcmVzcG9uc2l2ZS1kaXNwbGF5P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[ler@singmuiheng.com](/forum/user/3330-ler-singmuiheng-com "View ler@singmuiheng.com's Profile")** - [![ler@singmuiheng.com's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/3330-ler-singmuiheng-com "View ler@singmuiheng.com's Profile") - [ Offline](/forum/user/3330-ler-singmuiheng-com) Less More - Posts: 575 - Thank you received: 11 - - 11 years 2 months ago [\#212162](#212162) by [ler@singmuiheng.com](/forum/user/3330-ler-singmuiheng-com "View ler@singmuiheng.com's Profile") Replied by *[ler@singmuiheng.com](/forum/user/3330-ler-singmuiheng-com "View ler@singmuiheng.com's Profile")* on topic *[Changing number of columns in responsive display](/forum/26-product-category-display/863951-changing-number-of-columns-in-responsive-display#212162 "-- 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")* See picture below for the float problem… [ ![Screenshot_2015-08-21-21-30-19.png](/forum/attachment/26092) ](/forum/attachment/26092 "...1-21-30-19.png") - [ ![Screenshot_2015-08-21-21-30-19.png](/forum/attachment/26092) ](/forum/attachment/26092 "...1-21-30-19.png") [ ](/forum/attachment/26092?download=1 "...1-21-30-19.png") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjM5NTEtY2hhbmdpbmctbnVtYmVyLW9mLWNvbHVtbnMtaW4tcmVzcG9uc2l2ZS1kaXNwbGF5P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More - Posts: 86292 - Thank you received: 14270 - - 11 years 2 months ago [\#212166](#212166) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Changing number of columns in responsive display](/forum/26-product-category-display/863951-changing-number-of-columns-in-responsive-display#212166 "-- 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")* Hi, Next version of HikaShop will actually contain a height equalizer javascript in order to do that without the need of jquery. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjM5NTEtY2hhbmdpbmctbnVtYmVyLW9mLWNvbHVtbnMtaW4tcmVzcG9uc2l2ZS1kaXNwbGF5P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[ler@singmuiheng.com](/forum/user/3330-ler-singmuiheng-com "View ler@singmuiheng.com's Profile")** - [![ler@singmuiheng.com's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/3330-ler-singmuiheng-com "View ler@singmuiheng.com's Profile") - [ Offline](/forum/user/3330-ler-singmuiheng-com) Less More - Posts: 575 - Thank you received: 11 - - 11 years 2 months ago [\#212191](#212191) by [ler@singmuiheng.com](/forum/user/3330-ler-singmuiheng-com "View ler@singmuiheng.com's Profile") Replied by *[ler@singmuiheng.com](/forum/user/3330-ler-singmuiheng-com "View ler@singmuiheng.com's Profile")* on topic *[Changing number of columns in responsive display](/forum/26-product-category-display/863951-changing-number-of-columns-in-responsive-display#212191 "-- 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")* 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 Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjM5NTEtY2hhbmdpbmctbnVtYmVyLW9mLWNvbHVtbnMtaW4tcmVzcG9uc2l2ZS1kaXNwbGF5P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More - Posts: 86292 - Thank you received: 14270 - - 11 years 2 months ago [\#212201](#212201) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Changing number of columns in responsive display](/forum/26-product-category-display/863951-changing-number-of-columns-in-responsive-display#212201 "-- 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")* 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 following user(s) said Thank You: [ler@singmuiheng.com](/forum/user/3330-ler-singmuiheng-com "View ler@singmuiheng.com's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjM5NTEtY2hhbmdpbmctbnVtYmVyLW9mLWNvbHVtbnMtaW4tcmVzcG9uc2l2ZS1kaXNwbGF5P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[iedwards](/forum/user/12400-iedwards "View iedwards's Profile")** - [![iedwards's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/12400-iedwards "View iedwards's Profile") Topic Author - [ Offline](/forum/user/12400-iedwards) Less More - Posts: 250 - Thank you received: 7 - [](http://www.estm.co.uk) - 11 years 2 months ago [\#212346](#212346) by [iedwards](/forum/user/12400-iedwards "View iedwards's Profile") Replied by *[iedwards](/forum/user/12400-iedwards "View iedwards's Profile")* on topic *[Changing number of columns in responsive display](/forum/26-product-category-display/863951-changing-number-of-columns-in-responsive-display#212346 "-- 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")* 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 --- [ Ian Edwards Film Sound Recording](https://estm.co.uk) [ Alveley Mining Heritage](https://alveleyminingheritage.org) [ Mary Edwards-Porter - Author](https://www.mary-edwards-porter.co.uk) The following user(s) said Thank You: [ler@singmuiheng.com](/forum/user/3330-ler-singmuiheng-com "View ler@singmuiheng.com's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtL3Byb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjM5NTEtY2hhbmdpbmctbnVtYmVyLW9mLWNvbHVtbnMtaW4tcmVzcG9uc2l2ZS1kaXNwbGF5P3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. Board Categories HikaShop- Install & Update- Product & Category Display- Content Creation- Sales and Orders- - Orders management- - Reports & Statistics- Customers- Checkout- Payment Methods- Shipping Methods- Import & Export (CSV, XLS…)- Specific Features- - Affilation- - Taxes- - Wishlist- - Vote- - Carousel & Slider- - Mass Actions- - Filters & Search- - Discount & Coupon- - Feature Request- Integrations- Showcase- General Talk about HikaShop- Development- - HikaShop 3.0 Beta- Translation- Commercial Jobs HikaShop Components- HikaMarket- - Market: Feature requests- - Market: How to?- - Market: Bug Report- HikaSerial- - General talk about HikaSerial- - Serial: Bug Report- - Serial: How to?- - Support en Français de HikaSerial (French Support)- - HikaSubscription- HikaAuction- - Auction: Feature requests- - Auction: How to?- - Auction: Bug report Hikashop around the world- Support en Français (French Support)- Russian- - FAQ. Курс выживания с Hikashop. Частые вопросы и о- - Расширения Hikashop- - Наши сайты на Hikashop- 日本語版サポート(Japanese Support)- Thai- German Archives- Bug Report- How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.469 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org) [](#top)