wrong display of product list on mobile devices using static template

  • Posts: 98
  • Thank you received: 7
  • Hikashop Business
8 years 1 month ago #267208

-- url of the page with the problem -- : 2-rad-schwede.de/index.php/fahrrad-shop
-- HikaShop version -- : 3.0.1
-- Joomla version -- : 3.6.5.
-- PHP version -- : 7.0.17
-- Browser(s) name and version -- : mozilla & safaria (latest version)
-- Error-message(debug-mod must be tuned on) -- : wrong display of product list on mobile devices using static template

hi,

I'm using a static template with 1000px width that I can also use it on IPAD and other mobile devices without responsive design. For the complete website that works well. Only the shop product list is reordered from 4 categories / 3 products to a 1 / 1. How can I stop this behavior?

thanks and best regards
Markus

Attachments:

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

  • Posts: 83779
  • Thank you received: 13567
  • MODERATOR
8 years 1 month ago #267225

Hi,

That's actually how the responsive system works: On devices with a small width, the listings shift from several columns to one columns so that each element of the row isn't too much cramped.

Actually, the problem is more with your template which doesn't display well on devices with a small screen:
monosnap.com/file/Sni9rAYZOTBMFiqspRJvE7v8TmxExQ

But if you want to control the width at which points the listings switch to 1 column, you can edit the file media/com_hikashop/css/hikashop.css and change the min-width in these CSS commands:

.hkc-xs-12 { width:100%; }
.hkc-xs-11 { width:91.66666667%; }
.hkc-xs-10 { width:83.33333333%; }
.hkc-xs-9 { width:75%; }
.hkc-xs-8 { width:66.66666667%; }
.hkc-xs-7 { width:58.33333333%; }
.hkc-xs-6 { width:50%; }
.hkc-xs-5 { width:41.66666667%; }
.hkc-xs-4 { width:33.33333333%; }
.hkc-xs-3 { width:25%; }
.hkc-xs-2 { width:16.66666667%; }
.hkc-xs-1 { width:8.33333333%; }
@media (min-width:768px) {
	.hkc-sm-1, .hkc-sm-2, .hkc-sm-3, .hkc-sm-4, .hkc-sm-5, .hkc-sm-6, .hkc-sm-7, .hkc-sm-8, .hkc-sm-9, .hkc-sm-10, .hkc-sm-11, .hkc-sm-12 { float:left; }
	.hkc-sm-12 { width:100%; }
	.hkc-sm-11 { width:91.66666667%; }
	.hkc-sm-10 { width:83.33333333%; }
	.hkc-sm-9 { width:75%; }
	.hkc-sm-8 { width:66.66666667%; }
	.hkc-sm-7 { width:58.33333333%; }
	.hkc-sm-6 { width:50%; }
	.hkc-sm-5 { width:41.66666667%; }
	.hkc-sm-4 { width:33.33333333%; }
	.hkc-sm-3 { width:25%; }
	.hkc-sm-2 { width:16.66666667%; }
	.hkc-sm-1 { width:8.33333333%; }
}
@media (min-width:992px) {
	.hkc-md-1, .hkc-md-2, .hkc-md-3, .hkc-md-4, .hkc-md-5, .hkc-md-6, .hkc-md-7, .hkc-md-8, .hkc-md-9, .hkc-md-10, .hkc-md-11, .hkc-md-12 { float:left; }
	.hkc-md-12 { width:100%; }
	.hkc-md-11 { width:91.66666667%; }
	.hkc-md-10 { width:83.33333333%; }
	.hkc-md-9 { width:75%; }
	.hkc-md-8 { width:66.66666667%; }
	.hkc-md-7 { width:58.33333333%; }
	.hkc-md-6 { width:50%; }
	.hkc-md-5 { width:41.66666667%; }
	.hkc-md-4 { width:33.33333333%; }
	.hkc-md-3 { width:25%; }
	.hkc-md-2 { width:16.66666667%; }
	.hkc-md-1 { width:8.33333333%; }
}
@media (min-width:1200px) {
	.hkc-lg-1, .hkc-lg-2, .hkc-lg-3, .hkc-lg-4, .hkc-lg-5, .hkc-lg-6, .hkc-lg-7, .hkc-lg-8, .hkc-lg-9, .hkc-lg-10, .hkc-lg-11, .hkc-lg-12 { float:left; }
	.hkc-lg-12 { width:100%; }
	.hkc-lg-11 { width:91.66666667%; }
	.hkc-lg-10 { width:83.33333333%; }
	.hkc-lg-9 { width:75%; }
	.hkc-lg-8 { width:66.66666667%; }
	.hkc-lg-7 { width:58.33333333%; }
	.hkc-lg-6 { width:50%; }
	.hkc-lg-5 { width:41.66666667%; }
	.hkc-lg-4 { width:33.33333333%; }
	.hkc-lg-3 { width:25%; }
	.hkc-lg-2 { width:16.66666667%; }
	.hkc-lg-1 { width:8.33333333%; }
}
@media (min-width:1200px) and (max-width:1600px) {
	.hkc-lg-clear { clear:left; }
}
@media (min-width:1600px) {
	.hkc-xl-1, .hkc-xl-2, .hkc-xl-3, .hkc-xl-4, .hkc-xl-5, .hkc-xl-6, .hkc-xl-7, .hkc-xl-8, .hkc-xl-9, .hkc-xl-10, .hkc-xl-11, .hkc-xl-12 { float:left; }
	.hkc-xl-12 { width:100%; }
	.hkc-xl-11 { width:91.66666667%; }
	.hkc-xl-10 { width:83.33333333%; }
	.hkc-xl-9 { width:75%; }
	.hkc-xl-8 { width:66.66666667%; }
	.hkc-xl-7 { width:58.33333333%; }
	.hkc-xl-6 { width:50%; }
	.hkc-xl-5 { width:41.66666667%; }
	.hkc-xl-4 { width:33.33333333%; }
	.hkc-xl-3 { width:25%; }
	.hkc-xl-2 { width:16.66666667%; }
	.hkc-xl-1 { width:8.33333333%; }
	.hkc-xl-clear { clear:left; }
}

The following user(s) said Thank You: Markus Schnier

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

  • Posts: 98
  • Thank you received: 7
  • Hikashop Business
8 years 1 month ago #267283

Hi Nicolas,

thanks for your feedback. I'm aware that the template was not build in a responsive design.
But good to hear that you've a solution (like always) :-)

I change all value < 850 and now it works absolutly great and consisten to the rest of my template ;-)

best regards
Markus

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

  • Posts: 9
  • Thank you received: 0
7 years 10 months ago #273159

Hello

I think I have the same problem. I tried the solution in this thread but I am lost.
My template is Helium from Gantry.

On mobile my images display on the product page is off.
The main image is way to the right, hence the right half of the image is off the page.
The thumbnails of the extra images aren't on 1 row either.

What did I miss?
Maybe I tried the solution in this thread in the wrong file? If so, Can I get a advice for dummies. I am not a beginner in css etc, but I do still have a lot to learn.

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

  • Posts: 83779
  • Thank you received: 13567
  • MODERATOR
7 years 10 months ago #273246

Hi,

You're saying that the problem is on the product page, but this thread is about the products listings. So it's not the same issue apparently.
Hard to say anything more without looking at the page with the issue. Could you provide the link ?

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

  • Posts: 9
  • Thank you received: 0
7 years 8 months ago #276553

Solved it.. took a while. Played around with Settings and Custom css. Hiikashop has so many features, hard to get to know them all in a short amount of time.

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

  • Posts: 9
  • Thank you received: 0
7 years 5 months ago #283390

Hello!

I would like my product list to be 3 columns in the screen. I checked such file in my device and it was affirmative that all settings given above matched; however, I failed to have the result as per how I expect.
Nevertheless, I had set some CSS setting "width: auto (!important);" in respective CSS files.I do think that there might have been something going very awkwardly. Or what had I lost in the midst of such processes?

Thank you very much!!!

Attachments:
Last edit: 7 years 5 months ago by Jerome. Reason: 1 - Green is not visible 2 - PLEASE use carriage returns to make your message readable by a human person !

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

  • Posts: 83779
  • Thank you received: 13567
  • MODERATOR
7 years 5 months ago #283392

Hi,

HikaShop will only enforce the number of columns on computer screens.
On mobile devices, the products will be listed in one column since there isn't much width available.
That's what's known as "responsive" and is the industry standard to handle listings on mobile devices.
If you want to change that, you would need custom CSS. However, please note that it might not display properly on some smartphones. Only a one column listing on mobile devices will ensure that the listing display well for all mobile devices.

The following user(s) said Thank You: john_yen_CoNutri

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

Time to create page: 0.088 seconds
Powered by Kunena Forum