Problem with responsive design

  • Posts: 78
  • Thank you received: 0
10 years 8 months ago #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

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

  • Posts: 26032
  • Thank you received: 4006
  • MODERATOR
10 years 8 months ago #123537

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.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

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

  • Posts: 114
  • Thank you received: 14
10 years 8 months ago #123793

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

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

.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

deeemm.com

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

Time to create page: 0.051 seconds
Powered by Kunena Forum