Hikshop Bootsrap settings and Rockettheme

-- url of the page with the problem -- : xcelxray.chicagohosts.com/ ( sorry this will be live by end of week. Ha dot hide it for few days)
-- HikaShop version -- : 2.4
-- Joomla version -- : 3.4
-- PHP version -- : 5

I have multiple sites being built on older responsive joomla 3.4 Rockettheme templates.
They don't seem to support your bootstrap setting for responsive design. Every time I ennable it the divs break and I see them as stacked li content instead of columns.
Is there a way to globally add the required boostrap javacsript support? I have been override the static layouts with RT grids but that is very time intensive. being that they are one of the biggest template builders and you are one of the biggest ecommerce solutions has anyone else had this issue and what have you suggested to them. i don't see anything from search. I love your product and RTbutt it seems I am doing custom css or rebuilding the html on a regular basis now and feel I must be missing something.

I was told it was easy to install full blown bootstrap pretty easily via maxcdn... just add the link code(s) in my template's index.php file... before the closing </head>

getbootstrap.com/getting-started/#download-cdn

I will let you know what happens...LOL

Just so all RT people know. Its best to get layouts all done and then swap the divs classes to RTs responsive classes in the overrrides.

Either....
<div class="rt-demo-width-50">
or newer is this.
<div class="gantry-width-block gantry-width-50">

Just be sure your set on your columns. As the percentage is based on how many columns. 50 is 2 column
3 column is 33 four column is 25..etc.
Takes a little time but then it is fully integrated and smooth as butter.

Hi Mate, this thread really interests me as I use rockettheme templates to build all my sites and struggle with making my hika shop product pages responsive. I typically want 3-4 columns on product pages, but using bootstrap setting breaks divs. Can you please explain in more detail how I'm going to achieve this, bearing in mind, I'm a graphic/web designer, not a coder. Any help would be greatly appreciated as I'm not going to stop using rockettheme templates, I do like hikashop and I need 100% responsive designs.

Hi, OK, yes I have a custom css file that I use for my template, so what should I add to my templates custom css file?

Hi,

As Nicolas said you have to add media queries to apply specific css properties on specific screen size.
To use these media queries, the divs must have classes like "span4" etc.

Here is more documentation about layout customizations:
www.hikashop.com/support/support/documen...ize-the-display.html

I use media queries on page page to break the 4 column grid at certain widths from the element 25% —> to 50%— 100% at the skinniest. That way all your overrides are in one place.
This is a call we make to break 4 columns into 2 at a specific width. Then down to 1.
You will need to know how to add a custom css file which they can help you with on the RT forum.

@media only screen and (max-width: 1025px){
.hikashop_product_column_1,.hikashop_product_column_2,.hikashop_product_column_3,.hikashop_product_column_4 {
width:50%!important;}
}

@media only screen and (max-width: 767px) {
.hikashop_product_column_1,.hikashop_product_column_2,.hikashop_product_column_3,.hikashop_product_column_4 {width:100%!important;}

.sprocket-strips-content {min-height: 200px;}

.hikashop_product_characteristics{ display:block; clear:both;}
.hikashop_product_main_image_subdiv{ float: left; width: 30%!important;}
.hikashop_checkout_login{width:100%;}

select{max-width:100%;}

h4.iconstext{ font-size: 15px; display:block; clear:both;}
.margins{ margin: -10px -10px -10px -20px;}
.bullethide{display:none;}
.mobileBreak{display:block; clear:both; line-height:0.3em;}

}