DeeEmm

Pragmatism in code

If you are using a responsive template for your Joomla site you may have noticed that your HikaShop pages look pretty crappy when viewed on a mobile. This is because the default layout is not responsive. All layouts are fixed and do not flow well for smaller screen sizes. HikaShop have addressed this issue by providing a responsive layout based on Bootstrap, which is fine if you use a bootstrap template, which to be honest, is not very likely seeing as this is Joomla.

Sure Joomla 3 comes with bootstrap and there are one or two bootstrap templates available for J2.5 (like this one) but bootstrap is really like templating for dummies. It is the templating that you use when you have absolutely no idea about HTML or CSS and cannot figure out how to place a DIV where you need it. (or are plain lazy like me).

Fluid grid layouts like bootstrap are nothing new, most template producers have been knocking out variations on the grid theme for years, but where others only reach notoriety within limited (joomla) circles, bootstrap has almost become a household name due to the authors being coders at Twitter..

So it's pretty good that HikaShop decided to add a responsive design to cater for the mobile / tablet crowd, but its a complete crock of shite that they chose bootstrap to do this with as you are stuffed if you are not using a boostrap type template, which is in fact not very likely.

So how do you know if your template is boostrapped or not? You will notice that you have such an issue if when you view your products and categories in a DIV layout with multiple columns they are only displayed in a single column. You can test this by enabling the bootstrap layout in the HikaShop settings. (system > configuration > display > Use bootstrap design) and seeing how things look. 

Fixing this issue is actually not as hard as you might think. All you need to do is include the relevant CSS that would otherwise have been provided by boostrap. In short this only really amounts to the floats required to properly align the various DIVs created by HikaShop. You can find this below.

Simply cut and paste this to the end of your site or HikaShop template and all will be well.

/DM

 

.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%;
}