Problem with responsive design

121261
Topic Author
Offline

13 years 2 weeks ago #123536 by 121261

Problem with responsive design was created by 121261

-- 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

Please Log in or Create an account to join the conversation.

Jerome
Offline
HikaShop core developer

13 years 2 weeks ago #123537 by Jerome

Replied by Jerome on topic Problem with responsive design

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 or Create an account to join the conversation.

DeeEmm
Offline

13 years 2 weeks ago #123793 by DeeEmm

Replied by DeeEmm on topic Problem with responsive design

Bison, this is an easy fix, I already posted a reply for this in another recent thread - www.hikashop.com/forum/product-category-...-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 deeemm.com/tutorials/73-hikashop/262-res...ut-without-bootstrap

deeemm.com

Please Log in or Create an account to join the conversation.

Time to create page: 0.131 seconds