[Skip to main content](#vessel-content) # No mobile device responsiveness although bootstrap ## - **[bdonner](/forum/user/30385-bdonner "View bdonner's Profile")** - [![bdonner's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/30385-bdonner "View bdonner's Profile") Topic Author - [ Offline](/forum/user/30385-bdonner) Less More - Posts: 13 - Thank you received: 0 - - 11 years 9 months ago [\#185143](#185143) by [bdonner](/forum/user/30385-bdonner "View bdonner's Profile") *[No mobile device responsiveness although bootstrap](/forum/26-product-category-display/873993-no-mobile-device-responsiveness-although-bootstrap#185143 "-- url of the page with the problem -- : www.aavameri.fi/fi/kauppa.html -- HikaShop version -- : 2.3.5 essential -- Joomla version -- : 3.3.6 -- PHP version -- : 5.3.29 -- Browser(s) name and version -- : all -- Error-message(debug-mod must be tuned on) -- : none Hi, I have tried to search trough the posts and the documentation about HikaShop and mobile device responsiveness but I have not found the answer to the problem below: In HikaShop, I have two problems with responsive display. 1. The product images in for instance the category listing ( www.aavameri.fi/fi/kauppa.html ) does not resize. I find no way to alter these to fit the screen / column width, the thumbnails' width can only be given in pixels? Thus the product images are put on top of eachother. 2. HikaShop does not make a multi-column display drop the columns or items below each other when the display width gets too narrow. This bootstrap function works fine on other pages on the site ( for instance www.aavameri.fi/fi or www.aavameri.fi/fi/kurssit.html ). Any idea what is wrong? I am using a 100% bootstrap 2 enabled joomspirit template with all css, jquery 1.8.1 and java parts enabled. Very thankful for any help! Regards Ben")* was created by *[bdonner](/forum/user/30385-bdonner "View bdonner's Profile")* -- url of the page with the problem -- : [ www.aavameri.fi/fi/kauppa.html](http://www.aavameri.fi/fi/kauppa.html) -- HikaShop version -- : 2.3.5 essential -- Joomla version -- : 3.3.6 -- PHP version -- : 5.3.29 -- Browser(s) name and version -- : all -- Error-message(debug-mod must be tuned on) -- : none Hi, I have tried to search trough the posts and the documentation about HikaShop and mobile device responsiveness but I have not found the answer to the problem below: In HikaShop, I have two problems with responsive display. 1. The product images in for instance the category listing ( [ www.aavameri.fi/fi/kauppa.html](http://www.aavameri.fi/fi/kauppa.html) ) does not resize. I find no way to alter these to fit the screen / column width, the thumbnails' width can only be given in pixels? Thus the product images are put on top of eachother. 2. HikaShop does not make a multi-column display drop the columns or items below each other when the display width gets too narrow. This bootstrap function works fine on other pages on the site ( for instance [ www.aavameri.fi/fi](http://www.aavameri.fi/fi) or [ www.aavameri.fi/fi/kurssit.html](http://www.aavameri.fi/fi/kurssit.html) ). Any idea what is wrong? I am using a 100% bootstrap 2 enabled joomspirit template with all css, jquery 1.8.1 and java parts enabled. Very thankful for any help! Regards Ben Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzM5OTMtbm8tbW9iaWxlLWRldmljZS1yZXNwb25zaXZlbmVzcy1hbHRob3VnaC1ib290c3RyYXA/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[PolishedGeek](/forum/user/8378-polishedgeek "View PolishedGeek's Profile")** - [![PolishedGeek's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar8378_2012-07-29-5.png)](/forum/user/8378-polishedgeek "View PolishedGeek's Profile") - [ Offline](/forum/user/8378-polishedgeek) - Official HikaShop Development Partner Less More - Posts: 329 - Thank you received: 94 - - [](http://PolishedGeek.com/?utm_source=hikashop) - 11 years 9 months ago [\#185145](#185145) by [PolishedGeek](/forum/user/8378-polishedgeek "View PolishedGeek's Profile") Replied by *[PolishedGeek](/forum/user/8378-polishedgeek "View PolishedGeek's Profile")* on topic *[No mobile device responsiveness although bootstrap](/forum/26-product-category-display/873993-no-mobile-device-responsiveness-although-bootstrap#185145 "-- url of the page with the problem -- : www.aavameri.fi/fi/kauppa.html -- HikaShop version -- : 2.3.5 essential -- Joomla version -- : 3.3.6 -- PHP version -- : 5.3.29 -- Browser(s) name and version -- : all -- Error-message(debug-mod must be tuned on) -- : none Hi, I have tried to search trough the posts and the documentation about HikaShop and mobile device responsiveness but I have not found the answer to the problem below: In HikaShop, I have two problems with responsive display. 1. The product images in for instance the category listing ( www.aavameri.fi/fi/kauppa.html ) does not resize. I find no way to alter these to fit the screen / column width, the thumbnails' width can only be given in pixels? Thus the product images are put on top of eachother. 2. HikaShop does not make a multi-column display drop the columns or items below each other when the display width gets too narrow. This bootstrap function works fine on other pages on the site ( for instance www.aavameri.fi/fi or www.aavameri.fi/fi/kurssit.html ). Any idea what is wrong? I am using a 100% bootstrap 2 enabled joomspirit template with all css, jquery 1.8.1 and java parts enabled. Very thankful for any help! Regards Ben")* Are you using the latest version released Dec 24th? It has a ton of improvements, many of them related to responsiveness: [ www.hikashop.com/support/support/documen...ashop-changelog.html](http://www.hikashop.com/support/support/documentation/56-hikashop-changelog.html) --- ~ Deb Cinkus, CEO Polished Geek: more with monday․com eCommerce Business Process Automation Experts Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzM5OTMtbm8tbW9iaWxlLWRldmljZS1yZXNwb25zaXZlbmVzcy1hbHRob3VnaC1ib290c3RyYXA/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[bdonner](/forum/user/30385-bdonner "View bdonner's Profile")** - [![bdonner's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/30385-bdonner "View bdonner's Profile") Topic Author - [ Offline](/forum/user/30385-bdonner) Less More - Posts: 13 - Thank you received: 0 - - 11 years 9 months ago [\#185146](#185146) by [bdonner](/forum/user/30385-bdonner "View bdonner's Profile") Replied by *[bdonner](/forum/user/30385-bdonner "View bdonner's Profile")* on topic *[No mobile device responsiveness although bootstrap](/forum/26-product-category-display/873993-no-mobile-device-responsiveness-although-bootstrap#185146 "-- url of the page with the problem -- : www.aavameri.fi/fi/kauppa.html -- HikaShop version -- : 2.3.5 essential -- Joomla version -- : 3.3.6 -- PHP version -- : 5.3.29 -- Browser(s) name and version -- : all -- Error-message(debug-mod must be tuned on) -- : none Hi, I have tried to search trough the posts and the documentation about HikaShop and mobile device responsiveness but I have not found the answer to the problem below: In HikaShop, I have two problems with responsive display. 1. The product images in for instance the category listing ( www.aavameri.fi/fi/kauppa.html ) does not resize. I find no way to alter these to fit the screen / column width, the thumbnails' width can only be given in pixels? Thus the product images are put on top of eachother. 2. HikaShop does not make a multi-column display drop the columns or items below each other when the display width gets too narrow. This bootstrap function works fine on other pages on the site ( for instance www.aavameri.fi/fi or www.aavameri.fi/fi/kurssit.html ). Any idea what is wrong? I am using a 100% bootstrap 2 enabled joomspirit template with all css, jquery 1.8.1 and java parts enabled. Very thankful for any help! Regards Ben")* Thanks for your reply PolishedGeek, yes I bought an update today to test if this is a version issue, but the update did not help ![:(](/media/kunena/emoticons/5.png ":("). Ben Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzM5OTMtbm8tbW9iaWxlLWRldmljZS1yZXNwb25zaXZlbmVzcy1hbHRob3VnaC1ib290c3RyYXA/dG1wbD1tYXJrZG93bg==) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[bdonner](/forum/user/30385-bdonner "View bdonner's Profile")** - [![bdonner's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/30385-bdonner "View bdonner's Profile") Topic Author - [ Offline](/forum/user/30385-bdonner) Less More - Posts: 13 - Thank you received: 0 - - 11 years 9 months ago [\#185154](#185154) by [bdonner](/forum/user/30385-bdonner "View bdonner's Profile") Replied by *[bdonner](/forum/user/30385-bdonner "View bdonner's Profile")* on topic *[No mobile device responsiveness although bootstrap](/forum/26-product-category-display/873993-no-mobile-device-responsiveness-although-bootstrap#185154 "-- url of the page with the problem -- : www.aavameri.fi/fi/kauppa.html -- HikaShop version -- : 2.3.5 essential -- Joomla version -- : 3.3.6 -- PHP version -- : 5.3.29 -- Browser(s) name and version -- : all -- Error-message(debug-mod must be tuned on) -- : none Hi, I have tried to search trough the posts and the documentation about HikaShop and mobile device responsiveness but I have not found the answer to the problem below: In HikaShop, I have two problems with responsive display. 1. The product images in for instance the category listing ( www.aavameri.fi/fi/kauppa.html ) does not resize. I find no way to alter these to fit the screen / column width, the thumbnails' width can only be given in pixels? Thus the product images are put on top of eachother. 2. HikaShop does not make a multi-column display drop the columns or items below each other when the display width gets too narrow. This bootstrap function works fine on other pages on the site ( for instance www.aavameri.fi/fi or www.aavameri.fi/fi/kurssit.html ). Any idea what is wrong? I am using a 100% bootstrap 2 enabled joomspirit template with all css, jquery 1.8.1 and java parts enabled. Very thankful for any help! Regards Ben")* I now reinstalled the Joomla 3.x Protostar template and enabled it for a hikashop menu item ( [ www.aavameri.fi/fi/kau3](http://www.aavameri.fi/fi/kau3) ), and with it the layout behaves as I would expect it to behave -- so the problem is a conflict between my joomspirit 82 template's css and hikashop's ![:(](/media/kunena/emoticons/5.png ":("). A basic product listing page behaving correctly using the protostar template: [ www.aavameri.fi/fi/kau3](http://www.aavameri.fi/fi/kau3) and an exact copy of that product listing page, but now using the site's Joomspirit 82 template: [ www.aavameri.fi/fi/kau4](http://www.aavameri.fi/fi/kau4) Firebugging the css, I cannot find what causes the screwed-up layout when making the screen size more narrow, if anyone more skilled in css has any ideas I am very thankful! Regards Ben Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzM5OTMtbm8tbW9iaWxlLWRldmljZS1yZXNwb25zaXZlbmVzcy1hbHRob3VnaC1ib290c3RyYXA/dG1wbD1tYXJrZG93bg==) 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") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86293 - Thank you received: 14271 - - 11 years 9 months ago [\#185159](#185159) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[No mobile device responsiveness although bootstrap](/forum/26-product-category-display/873993-no-mobile-device-responsiveness-although-bootstrap#185159 "-- url of the page with the problem -- : www.aavameri.fi/fi/kauppa.html -- HikaShop version -- : 2.3.5 essential -- Joomla version -- : 3.3.6 -- PHP version -- : 5.3.29 -- Browser(s) name and version -- : all -- Error-message(debug-mod must be tuned on) -- : none Hi, I have tried to search trough the posts and the documentation about HikaShop and mobile device responsiveness but I have not found the answer to the problem below: In HikaShop, I have two problems with responsive display. 1. The product images in for instance the category listing ( www.aavameri.fi/fi/kauppa.html ) does not resize. I find no way to alter these to fit the screen / column width, the thumbnails' width can only be given in pixels? Thus the product images are put on top of eachother. 2. HikaShop does not make a multi-column display drop the columns or items below each other when the display width gets too narrow. This bootstrap function works fine on other pages on the site ( for instance www.aavameri.fi/fi or www.aavameri.fi/fi/kurssit.html ). Any idea what is wrong? I am using a 100% bootstrap 2 enabled joomspirit template with all css, jquery 1.8.1 and java parts enabled. Very thankful for any help! Regards Ben")* Hi, The issue is that your template doesn't have the responsive CSS part of bootstrap in it while protostar do have it. Here is the CSS of the protostar template that does the responsive: Code: @media (min-width: 768px) and (max-width: 979px) { .hidden-desktop { display: inherit !important; } .visible-desktop { display: none !important; } .visible-tablet { display: inherit !important; } .hidden-tablet { display: none !important; } } @media (max-width: 767px) { .hidden-desktop { display: inherit !important; } .visible-desktop { display: none !important; } .visible-phone { display: inherit !important; } .hidden-phone { display: none !important; } } .visible-print { display: none !important; } @media print { .visible-print { display: inherit !important; } .hidden-print { display: none !important; } } @media (max-width: 767px) { body { padding-left: 20px; padding-right: 20px; } .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top { margin-left: -20px; margin-right: -20px; } .container-fluid { padding: 0; } .dl-horizontal dt { float: none; clear: none; width: auto; text-align: left; } .dl-horizontal dd { margin-left: 0; } .container { width: auto; } .row-fluid { width: 100%; } .row, .thumbnails { margin-left: 0; } .thumbnails > li { float: none; margin-left: 0; } [class*="span"], .uneditable-input[class*="span"], .row-fluid [class*="span"] { float: none; display: block; width: 100%; margin-left: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .span12, .row-fluid .span12 { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .row-fluid [class*="offset"]:first-child { margin-left: 0; } .input-large, .input-xlarge, .input-xxlarge, input[class*="span"], select[class*="span"], textarea[class*="span"], .uneditable-input { display: block; width: 100%; min-height: 28px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .input-prepend input, .input-append input, .input-prepend input[class*="span"], .input-append input[class*="span"] { display: inline-block; width: auto; } .controls-row [class*="span"] + [class*="span"] { margin-left: 0; } } @media (max-width: 480px) { .nav-collapse { -webkit-transform: translate3d(0,0,0); } .page-header h1 small { display: block; line-height: 18px; } input[type="checkbox"], input[type="radio"] { border: 1px solid #ccc; } .form-horizontal .control-label { float: none; width: auto; padding-top: 0; text-align: left; } .form-horizontal .controls { margin-left: 0; } .form-horizontal .control-list { padding-top: 0; } .form-horizontal .form-actions { padding-left: 10px; padding-right: 10px; } .media .pull-left, .media .pull-right { float: none; display: block; margin-bottom: 10px; } .media-object { margin-right: 0; margin-left: 0; } .modal-header .close { padding: 10px; margin: -10px; } .carousel-caption { position: static; } } @media (min-width: 768px) and (max-width: 979px) { .row { margin-left: -20px; *zoom: 1; } .row:before, .row:after { display: table; content: ""; line-height: 0; } .row:after { clear: both; } [class*="span"] { float: left; min-height: 1px; margin-left: 20px; } .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { width: 724px; } .span12 { width: 724px; } .span11 { width: 662px; } .span10 { width: 600px; } .span9 { width: 538px; } .span8 { width: 476px; } .span7 { width: 414px; } .span6 { width: 352px; } .span5 { width: 290px; } .span4 { width: 228px; } .span3 { width: 166px; } .span2 { width: 104px; } .span1 { width: 42px; } .offset12 { margin-left: 764px; } .offset11 { margin-left: 702px; } .offset10 { margin-left: 640px; } .offset9 { margin-left: 578px; } .offset8 { margin-left: 516px; } .offset7 { margin-left: 454px; } .offset6 { margin-left: 392px; } .offset5 { margin-left: 330px; } .offset4 { margin-left: 268px; } .offset3 { margin-left: 206px; } .offset2 { margin-left: 144px; } .offset1 { margin-left: 82px; } .row-fluid { width: 100%; *zoom: 1; } .row-fluid:before, .row-fluid:after { display: table; content: ""; line-height: 0; } .row-fluid:after { clear: both; } .row-fluid [class*="span"] { display: block; width: 100%; min-height: 28px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; margin-left: 2.127659574%; *margin-left: 2.0744680846383%; } .row-fluid [class*="span"]:first-child { margin-left: 0; } .row-fluid .controls-row [class*="span"] + [class*="span"] { margin-left: 2.127659574%; } .row-fluid .span12 { width: 99.99999999%; *width: 99.946808500638%; } .row-fluid .span11 { width: 91.489361693%; *width: 91.436170203638%; } .row-fluid .span10 { width: 82.978723396%; *width: 82.925531906638%; } .row-fluid .span9 { width: 74.468085099%; *width: 74.414893609638%; } .row-fluid .span8 { width: 65.957446802%; *width: 65.904255312638%; } .row-fluid .span7 { width: 57.446808505%; *width: 57.393617015638%; } .row-fluid .span6 { width: 48.936170208%; *width: 48.882978718638%; } .row-fluid .span5 { width: 40.425531911%; *width: 40.372340421638%; } .row-fluid .span4 { width: 31.914893614%; *width: 31.861702124638%; } .row-fluid .span3 { width: 23.404255317%; *width: 23.351063827638%; } .row-fluid .span2 { width: 14.89361702%; *width: 14.840425530638%; } .row-fluid .span1 { width: 6.382978723%; *width: 6.3297872336383%; } .row-fluid .offset12 { margin-left: 104.255319138%; *margin-left: 104.14893615928%; } .row-fluid .offset12:first-child { margin-left: 102.127659564%; *margin-left: 102.02127658528%; } .row-fluid .offset11 { margin-left: 95.744680841%; *margin-left: 95.638297862277%; } .row-fluid .offset11:first-child { margin-left: 93.617021267%; *margin-left: 93.510638288277%; } .row-fluid .offset10 { margin-left: 87.234042544%; *margin-left: 87.127659565277%; } .row-fluid .offset10:first-child { margin-left: 85.10638297%; *margin-left: 84.999999991277%; } .row-fluid .offset9 { margin-left: 78.723404247%; *margin-left: 78.617021268277%; } .row-fluid .offset9:first-child { margin-left: 76.595744673%; *margin-left: 76.489361694277%; } .row-fluid .offset8 { margin-left: 70.21276595%; *margin-left: 70.106382971277%; } .row-fluid .offset8:first-child { margin-left: 68.085106376%; *margin-left: 67.978723397277%; } .row-fluid .offset7 { margin-left: 61.702127653%; *margin-left: 61.595744674277%; } .row-fluid .offset7:first-child { margin-left: 59.574468079%; *margin-left: 59.468085100277%; } .row-fluid .offset6 { margin-left: 53.191489356%; *margin-left: 53.085106377277%; } .row-fluid .offset6:first-child { margin-left: 51.063829782%; *margin-left: 50.957446803277%; } .row-fluid .offset5 { margin-left: 44.680851059%; *margin-left: 44.574468080277%; } .row-fluid .offset5:first-child { margin-left: 42.553191485%; *margin-left: 42.446808506277%; } .row-fluid .offset4 { margin-left: 36.170212762%; *margin-left: 36.063829783277%; } .row-fluid .offset4:first-child { margin-left: 34.042553188%; *margin-left: 33.936170209277%; } .row-fluid .offset3 { margin-left: 27.659574465%; *margin-left: 27.553191486277%; } .row-fluid .offset3:first-child { margin-left: 25.531914891%; *margin-left: 25.425531912277%; } .row-fluid .offset2 { margin-left: 19.148936168%; *margin-left: 19.042553189277%; } .row-fluid .offset2:first-child { margin-left: 17.021276594%; *margin-left: 16.914893615277%; } .row-fluid .offset1 { margin-left: 10.638297871%; *margin-left: 10.531914892277%; } .row-fluid .offset1:first-child { margin-left: 8.510638297%; *margin-left: 8.4042553182766%; } input, textarea, .uneditable-input { margin-left: 0; } .controls-row [class*="span"] + [class*="span"] { margin-left: 20px; } input.span12, textarea.span12, .uneditable-input.span12 { width: 710px; } input.span11, textarea.span11, .uneditable-input.span11 { width: 648px; } input.span10, textarea.span10, .uneditable-input.span10 { width: 586px; } input.span9, textarea.span9, .uneditable-input.span9 { width: 524px; } input.span8, textarea.span8, .uneditable-input.span8 { width: 462px; } input.span7, textarea.span7, .uneditable-input.span7 { width: 400px; } input.span6, textarea.span6, .uneditable-input.span6 { width: 338px; } input.span5, textarea.span5, .uneditable-input.span5 { width: 276px; } input.span4, textarea.span4, .uneditable-input.span4 { width: 214px; } input.span3, textarea.span3, .uneditable-input.span3 { width: 152px; } input.span2, textarea.span2, .uneditable-input.span2 { width: 90px; } input.span1, textarea.span1, .uneditable-input.span1 { width: 28px; } } @media (min-width: 1200px) { .row { margin-left: -20px; *zoom: 1; } .row:before, .row:after { display: table; content: ""; line-height: 0; } .row:after { clear: both; } [class*="span"] { float: left; min-height: 1px; margin-left: 20px; } .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container { width: 940px; } .span12 { width: 940px; } .span11 { width: 860px; } .span10 { width: 780px; } .span9 { width: 700px; } .span8 { width: 620px; } .span7 { width: 540px; } .span6 { width: 460px; } .span5 { width: 380px; } .span4 { width: 300px; } .span3 { width: 220px; } .span2 { width: 140px; } .span1 { width: 60px; } .offset12 { margin-left: 980px; } .offset11 { margin-left: 900px; } .offset10 { margin-left: 820px; } .offset9 { margin-left: 740px; } .offset8 { margin-left: 660px; } .offset7 { margin-left: 580px; } .offset6 { margin-left: 500px; } .offset5 { margin-left: 420px; } .offset4 { margin-left: 340px; } .offset3 { margin-left: 260px; } .offset2 { margin-left: 180px; } .offset1 { margin-left: 100px; } .row-fluid { width: 100%; *zoom: 1; } .row-fluid:before, .row-fluid:after { display: table; content: ""; line-height: 0; } .row-fluid:after { clear: both; } .row-fluid [class*="span"] { display: block; width: 100%; min-height: 28px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; margin-left: 2.127659574%; *margin-left: 2.0744680846383%; } .row-fluid [class*="span"]:first-child { margin-left: 0; } .row-fluid .controls-row [class*="span"] + [class*="span"] { margin-left: 2.127659574%; } .row-fluid .span12 { width: 99.99999999%; *width: 99.946808500638%; } .row-fluid .span11 { width: 91.489361693%; *width: 91.436170203638%; } .row-fluid .span10 { width: 82.978723396%; *width: 82.925531906638%; } .row-fluid .span9 { width: 74.468085099%; *width: 74.414893609638%; } .row-fluid .span8 { width: 65.957446802%; *width: 65.904255312638%; } .row-fluid .span7 { width: 57.446808505%; *width: 57.393617015638%; } .row-fluid .span6 { width: 48.936170208%; *width: 48.882978718638%; } .row-fluid .span5 { width: 40.425531911%; *width: 40.372340421638%; } .row-fluid .span4 { width: 31.914893614%; *width: 31.861702124638%; } .row-fluid .span3 { width: 23.404255317%; *width: 23.351063827638%; } .row-fluid .span2 { width: 14.89361702%; *width: 14.840425530638%; } .row-fluid .span1 { width: 6.382978723%; *width: 6.3297872336383%; } .row-fluid .offset12 { margin-left: 104.255319138%; *margin-left: 104.14893615928%; } .row-fluid .offset12:first-child { margin-left: 102.127659564%; *margin-left: 102.02127658528%; } .row-fluid .offset11 { margin-left: 95.744680841%; *margin-left: 95.638297862277%; } .row-fluid .offset11:first-child { margin-left: 93.617021267%; *margin-left: 93.510638288277%; } .row-fluid .offset10 { margin-left: 87.234042544%; *margin-left: 87.127659565277%; } .row-fluid .offset10:first-child { margin-left: 85.10638297%; *margin-left: 84.999999991277%; } .row-fluid .offset9 { margin-left: 78.723404247%; *margin-left: 78.617021268277%; } .row-fluid .offset9:first-child { margin-left: 76.595744673%; *margin-left: 76.489361694277%; } .row-fluid .offset8 { margin-left: 70.21276595%; *margin-left: 70.106382971277%; } .row-fluid .offset8:first-child { margin-left: 68.085106376%; *margin-left: 67.978723397277%; } .row-fluid .offset7 { margin-left: 61.702127653%; *margin-left: 61.595744674277%; } .row-fluid .offset7:first-child { margin-left: 59.574468079%; *margin-left: 59.468085100277%; } .row-fluid .offset6 { margin-left: 53.191489356%; *margin-left: 53.085106377277%; } .row-fluid .offset6:first-child { margin-left: 51.063829782%; *margin-left: 50.957446803277%; } .row-fluid .offset5 { margin-left: 44.680851059%; *margin-left: 44.574468080277%; } .row-fluid .offset5:first-child { margin-left: 42.553191485%; *margin-left: 42.446808506277%; } .row-fluid .offset4 { margin-left: 36.170212762%; *margin-left: 36.063829783277%; } .row-fluid .offset4:first-child { margin-left: 34.042553188%; *margin-left: 33.936170209277%; } .row-fluid .offset3 { margin-left: 27.659574465%; *margin-left: 27.553191486277%; } .row-fluid .offset3:first-child { margin-left: 25.531914891%; *margin-left: 25.425531912277%; } .row-fluid .offset2 { margin-left: 19.148936168%; *margin-left: 19.042553189277%; } .row-fluid .offset2:first-child { margin-left: 17.021276594%; *margin-left: 16.914893615277%; } .row-fluid .offset1 { margin-left: 10.638297871%; *margin-left: 10.531914892277%; } .row-fluid .offset1:first-child { margin-left: 8.510638297%; *margin-left: 8.4042553182766%; } input, textarea, .uneditable-input { margin-left: 0; } .controls-row [class*="span"] + [class*="span"] { margin-left: 20px; } input.span12, textarea.span12, .uneditable-input.span12 { width: 926px; } input.span11, textarea.span11, .uneditable-input.span11 { width: 846px; } input.span10, textarea.span10, .uneditable-input.span10 { width: 766px; } input.span9, textarea.span9, .uneditable-input.span9 { width: 686px; } input.span8, textarea.span8, .uneditable-input.span8 { width: 606px; } input.span7, textarea.span7, .uneditable-input.span7 { width: 526px; } input.span6, textarea.span6, .uneditable-input.span6 { width: 446px; } input.span5, textarea.span5, .uneditable-input.span5 { width: 366px; } input.span4, textarea.span4, .uneditable-input.span4 { width: 286px; } input.span3, textarea.span3, .uneditable-input.span3 { width: 206px; } input.span2, textarea.span2, .uneditable-input.span2 { width: 126px; } input.span1, textarea.span1, .uneditable-input.span1 { width: 46px; } .thumbnails { margin-left: -20px; } .thumbnails > li { margin-left: 20px; } .row-fluid .thumbnails { margin-left: 0; } } @media (max-width: 979px) { body { padding-top: 0; } .navbar-fixed-top, .navbar-fixed-bottom { position: static; } .navbar-fixed-top { margin-bottom: 18px; } .navbar-fixed-bottom { margin-top: 18px; } .navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner { padding: 5px; } .navbar .container { width: auto; padding: 0; } .navbar .brand { padding-left: 10px; padding-right: 10px; margin: 0 0 0 -5px; } .nav-collapse { clear: both; } .nav-collapse .nav { float: none; margin: 0 0 9px; } .nav-collapse .nav > li { float: none; } .nav-collapse .nav > li > a { margin-bottom: 2px; } .nav-collapse .nav > .divider-vertical { display: none; } .nav-collapse .nav .nav-header { color: #555; text-shadow: none; } .nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a { padding: 9px 15px; font-weight: bold; color: #555; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .nav-collapse .btn { padding: 4px 10px 4px; font-weight: normal; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .nav-collapse .dropdown-menu li + li a { margin-bottom: 2px; } .nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus { background-color: #f2f2f2; } .navbar-inverse .nav-collapse .nav > li > a, .navbar-inverse .nav-collapse .dropdown-menu a { color: #999; } .navbar-inverse .nav-collapse .nav > li > a:hover, .navbar-inverse .nav-collapse .nav > li > a:focus, .navbar-inverse .nav-collapse .dropdown-menu a:hover, .navbar-inverse .nav-collapse .dropdown-menu a:focus { background-color: #111111; } .nav-collapse.in .btn-group { margin-top: 5px; padding: 0; } .nav-collapse .dropdown-menu { position: static; top: auto; left: auto; float: none; display: none; max-width: none; margin: 0 15px; padding: 0; background-color: transparent; border: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .nav-collapse .open > .dropdown-menu { display: block; } .nav-collapse .dropdown-menu:before, .nav-collapse .dropdown-menu:after { display: none; } .nav-collapse .dropdown-menu .divider { display: none; } .nav-collapse .nav > li > .dropdown-menu:before, .nav-collapse .nav > li > .dropdown-menu:after { display: none; } .nav-collapse .navbar-form, .nav-collapse .navbar-search { float: none; padding: 9px 15px; margin: 9px 0; border-top: 1px solid #f2f2f2; border-bottom: 1px solid #f2f2f2; -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); } .navbar-inverse .nav-collapse .navbar-form, .navbar-inverse .nav-collapse .navbar-search { border-top-color: #111111; border-bottom-color: #111111; } .navbar .nav-collapse .nav.pull-right { float: none; margin-left: 0; } .nav-collapse, .nav-collapse.collapse { overflow: hidden; height: 0; } .navbar .btn-navbar { display: block; } .navbar-static .navbar-inner { padding-left: 10px; padding-right: 10px; } } @media (min-width: 980px) { .nav-collapse.collapse { height: auto !important; overflow: visible !important; } } You can find it here: [ www.aavameri.fi/templates/protostar/css/template.css](http://www.aavameri.fi/templates/protostar/css/template.css) Now, you might not need/want all of it, but at least the parts relative to the span4, span6, span8, etc. The best would be to contact your template provider for more precise help on that boostrap CSS of their template. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI2LXByb2R1Y3QtY2F0ZWdvcnktZGlzcGxheS84NzM5OTMtbm8tbW9iaWxlLWRldmljZS1yZXNwb25zaXZlbmVzcy1hbHRob3VnaC1ib290c3RyYXA/dG1wbD1tYXJrZG93bg==) 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.142 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org) [](#top)