Listings

  • Posts: 57
  • Thank you received: 1
3 years 6 months ago #332766

Hi guys,

When I view my shop on a tablet in landscape mode, the list of products (and categories) are nicely lined up next to each other



But when I turn the tablet to portrait, there are these huge boxes while there could fit at least 2 products (or categories) next to each other



How / Where can I change this setting in Hikashop?

Attachments:

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

  • Posts: 4747
  • Thank you received: 644
  • MODERATOR
3 years 6 months ago #332770

Hello,

There are no setting in HikaShop to do this, but there are a quite easy solution.
To have a different display from mobile to classic screen or a wider screen.
Let's detail this :
1. First, see this documentation about the @media command.
2. Have a look on this forum subject
=> Example : (pseudo code)

@media only screen and (max-width: 600px) {
  .classic_listing_module .item_container {
    width: 50%;
  }
}
With this code, you will have your listing module (or item menu) will automatically switch for 2 columuns (2 item per row module) WHEN the screen will be smaller than 600 pixel.

Hope this will meet your expectations.
Regards

Last edit: 3 years 6 months ago by Philip.

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

  • Posts: 57
  • Thank you received: 1
3 years 6 months ago #332800

Oke, so I need to add/change this piece of css code. In which css file? Where is it located?

Nevermind, found it ;)

But no clue where to put it :(

Last edit: 3 years 6 months ago by Borburgh.

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

  • Posts: 231
  • Thank you received: 28
  • Hikashop Business
3 years 6 months ago #332815

In the css file of your template, or you cand also add that from hikashop:
Congiguration > Display > Css > Styles for the front-end

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

  • Posts: 82863
  • Thank you received: 13372
  • MODERATOR
3 years 6 months ago #332804

Hi,

Here is the documentation on how to add CSS code for HikaShop:
www.hikashop.com/support/documentation/1...ize-the-display.html
You can add your custom CSS at the end of the "styles for frontend" option. And by default, that setting should be set to "none", with no CSS in it.

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

Time to create page: 0.080 seconds
Powered by Kunena Forum