HIKASHOP ESSENTIAL 60€The basic version. With the main features for a little shop.
HIKAMARKETAdd-on Create a multivendor platform. Enable many vendors on your website.
HIKASERIALAdd-on Sale e-tickets, vouchers, gift certificates, serial numbers and more!
MARKETPLACEPlugins, modules and other kinds of integrations for HikaShop
-- 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
Please Log in or Create an account to join the conversation.
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
Please Log in or Create an account to join the conversation.
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 
.
Ben
Please Log in or Create an account to join the conversation.
I now reinstalled the Joomla 3.x Protostar template and enabled it for a hikashop menu item (
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 .
A basic product listing page behaving correctly using the protostar template:
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
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 or Create an account to join the conversation.
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:
@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;
}
}Please Log in or Create an account to join the conversation.
