[Skip to main content](#vessel-content) # Problem with responsive design ## - **[121261](/forum/user/26582-121261 "View 121261's Profile")** - [![121261's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/26582-121261 "View 121261's Profile") Topic Author - [ Offline](/forum/user/26582-121261) Less More - Posts: 78 - Thank you received: 0 - - 13 years 1 month ago [\#123536](#123536) by [121261](/forum/user/26582-121261 "View 121261's Profile") *[Problem with responsive design](/forum/26-product-category-display/861982-problem-with-responsive-design#123536 "-- url of the page with the problem -- : mywebsite.com/mypage -- HikaShop version -- : 2.2.0 -- Joomla version -- : 2.5.14 Template is gavick - full responsive. In hikashop on product category listning, on a desktop, when having boostrap design set to NO, we have 3 colums. When I set boostrap design to ON, it changes to 1 column ON THE DESKTOP - looks awefull. How can I get the 3 columns on desktop UNTIL the size goes down to ipad /iphone size... can anybody help regards Bison")* was created by *[121261](/forum/user/26582-121261 "View 121261's Profile")* -- url of the page with the problem -- : [ mywebsite.com/mypage](http://mywebsite.com/mypage) -- HikaShop version -- : 2.2.0 -- Joomla version -- : 2.5.14 Template is gavick - full responsive. In hikashop on product category listning, on a desktop, when having boostrap design set to NO, we have 3 colums. When I set boostrap design to ON, it changes to 1 column ON THE DESKTOP - looks awefull. How can I get the 3 columns on desktop UNTIL the size goes down to ipad /iphone size... can anybody help regards Bison Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjE5ODItcHJvYmxlbS13aXRoLXJlc3BvbnNpdmUtZGVzaWduP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Jerome](/forum/user/80-jerome "View Jerome's Profile")** - [![Jerome's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar80.png)](/forum/user/80-jerome "View Jerome's Profile") - [ Offline](/forum/user/80-jerome) - HikaShop core developer Less More - Posts: 26394 - Thank you received: 4078 - - [](http://obsi.dev) - 13 years 1 month ago [\#123537](#123537) by [Jerome](/forum/user/80-jerome "View Jerome's Profile") Replied by *[Jerome](/forum/user/80-jerome "View Jerome's Profile")* on topic *[Problem with responsive design](/forum/26-product-category-display/861982-problem-with-responsive-design#123537 "-- url of the page with the problem -- : mywebsite.com/mypage -- HikaShop version -- : 2.2.0 -- Joomla version -- : 2.5.14 Template is gavick - full responsive. In hikashop on product category listning, on a desktop, when having boostrap design set to NO, we have 3 colums. When I set boostrap design to ON, it changes to 1 column ON THE DESKTOP - looks awefull. How can I get the 3 columns on desktop UNTIL the size goes down to ipad /iphone size... can anybody help regards Bison")* Hi, HikaShop uses Bootstrap responsive design. If your template is not compatible with Bootstrap it won't work and you will see one single column for your listings. At this moment you have to deactivate the "bootstrap design". Bootstrap is the responsive framework chosen by Joomla, that's why we made an integration with this specific framework which is include in Joomla 3. Regards, --- Jerome - Obsidev.com HikaMarket & HikaSerial developer / HikaShop core dev team. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjE5ODItcHJvYmxlbS13aXRoLXJlc3BvbnNpdmUtZGVzaWduP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[DeeEmm](/forum/user/26410-deeemm "View DeeEmm's Profile")** - [![DeeEmm's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar26410.jpg)](/forum/user/26410-deeemm "View DeeEmm's Profile") - [ Offline](/forum/user/26410-deeemm) Less More - Posts: 114 - Thank you received: 14 - - [](http://deeemm.com) - 13 years 1 month ago [\#123793](#123793) by [DeeEmm](/forum/user/26410-deeemm "View DeeEmm's Profile") Replied by *[DeeEmm](/forum/user/26410-deeemm "View DeeEmm's Profile")* on topic *[Problem with responsive design](/forum/26-product-category-display/861982-problem-with-responsive-design#123793 "-- url of the page with the problem -- : mywebsite.com/mypage -- HikaShop version -- : 2.2.0 -- Joomla version -- : 2.5.14 Template is gavick - full responsive. In hikashop on product category listning, on a desktop, when having boostrap design set to NO, we have 3 colums. When I set boostrap design to ON, it changes to 1 column ON THE DESKTOP - looks awefull. How can I get the 3 columns on desktop UNTIL the size goes down to ipad /iphone size... can anybody help regards Bison")* Bison, this is an easy fix, I already posted a reply for this in another recent thread - [ ](http://www.hikashop.com/forum/product-category-display/861401-category-and-product-column-problem.html)[ www.hikashop.com/forum/product-category-...-column-problem.html](http://www.hikashop.com/forum/product-category-display/861401-category-and-product-column-problem.html) Basically all you need to do is include the bootstrap CSS in your Gavick template. eg add the following to to the end of your site/templates/gacicktemplate/css/template.css Code: .row-fluid { width: 100%; *zoom: 1; } .row-fluid:before, .row-fluid:after { display: table; line-height: 0; content: ""; } .row-fluid:after { clear: both; } .row-fluid [class*="span"] { display: block; float: left; width: 100%; min-height: 30px; margin-left: 2.127659574468085%; *margin-left: 2.074468085106383%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .row-fluid [class*="span"]:first-child { margin-left: 0; } .row-fluid .controls-row [class*="span"] + [class*="span"] { margin-left: 2.127659574468085%; } .row-fluid .span12 { width: 100%; *width: 99.94680851063829%; } .row-fluid .span11 { width: 91.48936170212765%; *width: 91.43617021276594%; } .row-fluid .span10 { width: 82.97872340425532%; *width: 82.92553191489361%; } .row-fluid .span9 { width: 74.46808510638297%; *width: 74.41489361702126%; } .row-fluid .span8 { width: 65.95744680851064%; *width: 65.90425531914893%; } .row-fluid .span7 { width: 57.44680851063829%; *width: 57.39361702127659%; } .row-fluid .span6 { width: 48.93617021276595%; *width: 48.88297872340425%; } .row-fluid .span5 { width: 40.42553191489362%; *width: 40.37234042553192%; } .row-fluid .span4 { width: 31.914893617021278%; *width: 31.861702127659576%; } .row-fluid .span3 { width: 23.404255319148934%; *width: 23.351063829787233%; } .row-fluid .span2 { width: 14.893617021276595%; *width: 14.840425531914894%; } .row-fluid .span1 { width: 6.382978723404255%; *width: 6.329787234042553%; } More info here if you are interested - [ deeemm.com/tutorials/73-hikashop/262-res...ut-without-bootstrap](http://deeemm.com/tutorials/73-hikashop/262-responsive-layout-without-bootstrap)[ ](http://www.hikashop.com/forum/product-category-display/861401-category-and-product-column-problem.html)[ deeemm.com/tutorials/73-hikashop/262-res...ut-without-bootstrap](http://deeemm.com/tutorials/73-hikashop/262-responsive-layout-without-bootstrap) --- [ deeemm.com](http://deeemm.com) Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NjE5ODItcHJvYmxlbS13aXRoLXJlc3BvbnNpdmUtZGVzaWduP3RtcGw9bWFya2Rvd24=) 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.216 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org) [](#top)