Real responsive product category view

  • Posts: 48
  • Thank you received: 0
  • Hikashop Business
5 months 1 week ago #291391

-- HikaShop version -- : 3.4.0
-- Joomla version -- : 3.8.6
-- PHP version -- : 7.0.16
-- Browser(s) name and version -- : mozilla latest version

Hi,

is there a chance that the amount of of products per category line will adopt based on the screen size?

That would be a real responsive behavior. In my case I selected 3 products in the view and that will be presented regardless of the width of the screen. Only on mobile it breaks / switch to 1 product per line even with a responsive layout.

Any chance to change this?

thanks and best regards
Markus

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

  • Posts: 63314
  • Thank you received: 9126
  • MODERATOR
5 months 6 days ago #291418

Hi,

Doing it by default is complex. That's because we don't know the width available on your template in the area where you're displaying the listing and the width necessary for each product.
So the only real information is the total width of the window, which allows us to know if you're on a smartphone or a computer and thus switch between several columns to one columns.
Doing something more fancy would mean that in some cases, you would configure 3 columns in the settings of your listing, but you would only see 2 columns on the frontend because the rules we would set wouldn't match with the way your template is done.

Now, with that being said, while we can't do something robust by default for that in HikaShop by default, it's actually quite easy for you to add it for your particular case as we made it so you could do it easily.

For example, on the page /index.php/shop/fahrrad-shop of your website, you have three columns for your products listing.
It's done by the CSS rule below:

@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%; }
}
in the media/com_hikashop/hikashop.css file which states that above a window of 992px of width, the elements of a listing in 3 columns will have each a width of 33.33333%
So you could simply add such CSS on your website:
@media (min-width:992px AND max-width:1300px) {
  .hkc-md-4 { width:50% !important; }
}
That means that for a browser width between 992px and 1300px the elements of the listings in 3 columns would have a width of 50%. And thus, in such cases you would actually see them in 2 columns.
That CSS can be added either in your template CSS, or in the CSS of HikaShop ( www.hikashop.com/support/documentation/1...ize-the-display.html )

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

  • Posts: 48
  • Thank you received: 0
  • Hikashop Business
5 months 4 days ago #291560

Hi Nicolas,

that sounds exactly what I'm looking for.

I add your lines to my custom.css (already a few hundred lines) of the lessAllrounder Template but with saving I receive the following error:

lessphp error: parse error: failed at `@media (min-width:992px AND max-width:1300px) {` line: 495

any Idea what went wrong?

thanks and best regards
Markus

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

  • Posts: 63314
  • Thank you received: 9126
  • MODERATOR
5 months 3 days ago #291562

Hi,

Try like that then:
@media (min-width:992px) AND (max-width:1300px) {
.hkc-md-4 { width:50% !important; }
}

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

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

  • Posts: 48
  • Thank you received: 0
  • Hikashop Business
5 months 1 day ago #291641

Hi Nicolas,

GREAT .Works like a charm

thanks and best regards
Markus

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

Time to create page: 0.088 seconds
Powered by Kunena Forum