Joomla/HikaShop responsiveness problem

sarah11
6 Posts
sarah11 posted this 11 August 2015

First, thanks for a great product. It takes a little time to understand what Themler can do, but it's well worth the effort.

I've created templates for two Joomla! sites using the ecommerce extension HikaShop. HikaShop has a configuration option to 'Use Bootstrap design', which can be toggled on or off. The problem is this: with the option on, a page listing all the products in a given category displays in a single column even when it's set to display in multiple columns; with the option off, the product listing displays correctly but is not properly responsive (items overlap on a small screen). This is one of the sites, currently with 'Use Bootstrap design' turned off: http://www.thelavenderlady.co.uk/index.php/shop

I asked for help on the HikaShop forum, and got the following reply:

"Your template seems to load some Bootstrap 3, but not Bootstrap 2. But HikaShop is, like native Joomla, supporting only Bootstrap 2 (though BS 3 support is under way, I hear). So, turning Bootstrap off in HikaShop is the right thing to do for you. "Missing responsiveness" can then be added with custom CSS and media queries....More similar code may be required for other shop elements or pages, of course."

This reduces the usefulness to me of a Themler template quite considerably, since I often use HikaShop. Is there a simpler fix, at least until Bootstrap 3 is fully supported?

First, thanks for a great product. It takes a little time to understand what Themler can do, but it's well worth the effort. I've created templates for two Joomla! sites using the ecommerce extension HikaShop. HikaShop has a configuration option to 'Use Bootstrap design', which can be toggled on or off. The problem is this: with the option on, a page listing all the products in a given category displays in a single column even when it's set to display in multiple columns; with the option off, the product listing displays correctly but is not properly responsive (items overlap on a small screen). This is one of the sites, currently with 'Use Bootstrap design' turned off: http://www.thelavenderlady.co.uk/index.php/shop I asked for help on the HikaShop forum, and got the following reply: "Your template seems to load some Bootstrap 3, but not Bootstrap 2. But HikaShop is, like native Joomla, supporting only Bootstrap 2 (though BS 3 support is under way, I hear). So, turning Bootstrap off in HikaShop is the right thing to do for you. "Missing responsiveness" can then be added with custom CSS and media queries....More similar code may be required for other shop elements or pages, of course." This reduces the usefulness to me of a Themler template quite considerably, since I often use HikaShop. Is there a simpler fix, at least until Bootstrap 3 is fully supported?
bootstrap joomla-component HikaShop
Vote to pay developers attention to this features or issue.
8 Comments
Order By: Standard | Newest
Chrisnz
39 Posts
Chrisnz posted this 11 August 2015

I had the same problem and had to turn off Bootstrap in Hikashop and add some custom CSS to deal with the product listings for the different screen sizes. e.g.:

@media only screen and (max-width: 970px) {
.hikashop_subcategories div.hikashop_category, .hikashop_products_listing div.hikashop_product
{width: 50% !important;}
}

@media only screen and (max-width: 750px) {
.hikashop_subcategories div.hikashop_category, .hikashop_products_listing div.hikashop_product
{width: 100% !important;}
}

The above forces the products into 2 columns for screens under 970 pixels and 1 column under 750px

http://www.picturemouldings.co.nz/mouldings/mouldings/profile-155

I had the same problem and had to turn off Bootstrap in Hikashop and add some custom CSS to deal with the product listings for the different screen sizes. e.g.: @media only screen and (max-width: 970px) { .hikashop_subcategories div.hikashop_category, .hikashop_products_listing div.hikashop_product {width: 50% !important;} } @media only screen and (max-width: 750px) { .hikashop_subcategories div.hikashop_category, .hikashop_products_listing div.hikashop_product {width: 100% !important;} } The above forces the products into 2 columns for screens under 970 pixels and 1 column under 750px http://www.picturemouldings.co.nz/mouldings/mouldings/profile-155
sarah11
6 Posts
sarah11 posted this 11 August 2015

That's handy! Thanks for sharing it, Chris.

That's handy! Thanks for sharing it, Chris.
bmericsson
12 Posts
bmericsson posted this 26 August 2015

Where exactly do I put this code?
I have tried in template.css, template.ie.css and template.ie.min.css without success. Please let me know. Thank you

Where exactly do I put this code? I have tried in template.css, template.ie.css and template.ie.min.css without success. Please let me know. Thank you
sarah11
6 Posts
sarah11 posted this 26 August 2015

It goes in Hikashop's own front-end CSS file. From the Hikashop dashboard, choose System, then Configuration, then Display, then it's under CSS.

It goes in Hikashop's own front-end CSS file. From the Hikashop dashboard, choose System, then Configuration, then Display, then it's under CSS.
bmericsson
12 Posts
bmericsson posted this 26 August 2015

Thank you very much, Sarah11, you are number one : )

Thank you very much, Sarah11, you are number one : )
DeeMo
44 Posts
DeeMo posted this 22 January 2016

This is a brilliant fix!

Saved me god knows how long thanks!!

This is a brilliant fix! Saved me god knows how long thanks!!
djundi
16 Posts
djundi posted this 11 April 2016

I had the same problem and had to turn off Bootstrap in Hikashop and add some custom CSS to deal with the product listings for the different screen sizes. e.g.:

@media only screen and (max-width: 970px) {
.hikashop_subcategories div.hikashop_category, .hikashop_products_listing div.hikashop_product
{width: 50% !important;}
}

@media only screen and (max-width: 750px) {
.hikashop_subcategories div.hikashop_category, .hikashop_products_listing div.hikashop_product
{width: 100% !important;}
}

The above forces the products into 2 columns for screens under 970 pixels and 1 column under 750px

http://www.picturemouldings.co.nz/mouldings/mouldings/profile-155

Thanks, work great :)

> I had the same problem and had to turn off Bootstrap in Hikashop and add some custom CSS to deal with the product listings for the different screen sizes. e.g.: > > @media only screen and (max-width: 970px) { > .hikashop_subcategories div.hikashop_category, .hikashop_products_listing div.hikashop_product > {width: 50% !important;} > } > > @media only screen and (max-width: 750px) { > .hikashop_subcategories div.hikashop_category, .hikashop_products_listing div.hikashop_product > {width: 100% !important;} > } > > > The above forces the products into 2 columns for screens under 970 pixels and 1 column under 750px > > http://www.picturemouldings.co.nz/mouldings/mouldings/profile-155 Thanks, work great :)

Last edited 11 April 2016 by djundi

Christian R.
1 Posts
Christian R. posted this 29 June 2016

Thank you very much... after weeks searching answers, finally find it here. ;)

Thank you very much... after weeks searching answers, finally find it here. ;)
You must log in or register to leave comments