Display two categories in a row on mobile

  • Posts: 1027
  • Thank you received: 11
  • Hikashop Business
4 years 2 months ago #315805

Greetings everyone once again.

I'm working on an e-shop right now and the client has requested that the category listings for devices (tablet, mobile and such) are displayed as two categories per row (two boxes per row, not sure if I've explained it correctly). I wonder if there is any way that I can make that happen.

I made the products show in 2 products per row by using a bit of css width:50% on the product listing class. I tried implementing that same rule on the category listing but it's not working. It splits the space but it doesn't make the categories show in pairs.

Any ideas? Thanks in advance.

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

  • Posts: 81539
  • Thank you received: 13069
  • MODERATOR
4 years 2 months ago #315817

Hi,

In the file media/com_hikashop/css/hikashop.css you have this code:

.hkc-xs-12, .hkc-xs-11, .hkc-xs-10, .hkc-xs-9, .hkc-xs-8, .hkc-xs-7, .hkc-xs-6, .hkc-xs-5, .hkc-xs-4, .hkc-xs-3, .hkc-xs-2, .hkc-xs-1,
.hkc-sm-12, .hkc-sm-11, .hkc-sm-10, .hkc-sm-9, .hkc-sm-8, .hkc-sm-7, .hkc-sm-6, .hkc-sm-5, .hkc-sm-4, .hkc-sm-3, .hkc-sm-2, .hkc-sm-1,
.hkc-md-12, .hkc-md-11, .hkc-md-10, .hkc-md-9, .hkc-md-8, .hkc-md-7, .hkc-md-6, .hkc-md-5, .hkc-md-4, .hkc-md-3, .hkc-md-2, .hkc-md-1,
.hkc-lg-12, .hkc-lg-11, .hkc-lg-10, .hkc-lg-9, .hkc-lg-8, .hkc-lg-7, .hkc-lg-6, .hkc-lg-5, .hkc-lg-4, .hkc-lg-3, .hkc-lg-2, .hkc-lg-1,
.hkc-xl-12, .hkc-xl-11, .hkc-xl-10, .hkc-xl-9, .hkc-xl-8, .hkc-xl-7, .hkc-xl-6, .hkc-xl-5, .hkc-xl-4, .hkc-xl-3, .hkc-xl-2, .hkc-xl-1{
	width: 100%;
}
it's this code which changes from X columns to 1 column on small resolutions.
If you change that code to 50%, then you'll keep two columns on small resolutions.
Or you could add after that code :
.hikashop_category{
	width: 50%;
}
so that it does it only on category listings.
Note that you can't put that code elsewhere, otherwise, it will overwrite the code for the display in more columns (the CSS just after in that file with the @media tags). Or you would have to copy as well the whole @media CSS code area after that too.
Note also that since you can't do an override of that CSS file, you'll loose the modifications you make in it when you update your HikaShop.

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

  • Posts: 1027
  • Thank you received: 11
  • Hikashop Business
4 years 2 months ago #315846

I put the code you suggested in there. Now I'm facing another "problem" (I'm not sure if it's that serious to be honest but I'm stuck) which I'm a bit on the fence about. The space between the categories is huge. Sometimes it's even bigger than the screenshot I post here and I refresh, then get the result I've shown in the picture. Surely the first problem is a bug of sorts, but how do I at least fix the latter that is the gap?

Thanks again. Sorry for the trouble. ^^

Attachments:

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

  • Posts: 81539
  • Thank you received: 13069
  • MODERATOR
4 years 2 months ago #315848

Hi,

In the file /templates/yootheme_vappas/css/custom.css you've added the CSS:

.hikashop_container {
    margin: 16px 12px !important;
    border: 1px solid #cac9c9;
}
which adds 32px (16px for the top and 16px for the bottom) of blank vertically between the elements.

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

  • Posts: 1027
  • Thank you received: 11
  • Hikashop Business
4 years 2 months ago #315870

Oops. You are right. It escaped me. I apologize! Thank you for the help, I fixed it.

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

  • Posts: 1027
  • Thank you received: 11
  • Hikashop Business
4 years 1 month ago #316221

Hi again. I was going through the site once again. Even though your code worked where I wanted it to work, I noticed that in the page for the user account, the problem in the picture appears. As you can see, all of the items are squeezed on the left, which makes it look a bit... you know. When I remove the 50% from the code and put it back to 100% the problem is fixed, BUT, then the categories are back to being 1 by 1 instead of pairs... which is not what the client wants. Is it possible to fix his without affecting the categories?

Attachments:

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

  • Posts: 4519
  • Thank you received: 611
  • MODERATOR
4 years 1 month ago #316223

Hello,

In order to better understand the context we will need to see by ourselves the context, this means that we will need a user references to access your page which have the issue as it's seems to be in the user control panel.

Note : Use our Contact us form to provide these references, don't forget to add an Url link to this thread in your message.
Awaiting elements to progress on your subject.

Regards

Last edit: 4 years 1 month ago by Philip.

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

  • Posts: 1027
  • Thank you received: 11
  • Hikashop Business
4 years 1 month ago #316279

I have sent an email. Thank you for your help.

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

  • Posts: 4519
  • Thank you received: 611
  • MODERATOR
4 years 1 month ago #316290

Hello,

Yes, I think that you have to choose a better selector in order to target only the category listing and only on small device.
But first, you have to go back, because edit the hikashop.css isn't advised, and especially the hikashop grid css that can leads to many side effect, it's not an easy task.

So, you must have a very specific css command, let's detail what it need :
First, edit the frontend file css (and not the hikashop.css), and at the end(better for priority) of the file add this kind of css code :

@media (max-width:600px) {  // This will lead to apply your css only on small devices (600px)
	.item_menu_html .categories_listing1,   // First categories targeted
        .item_menu_html .categories_listing2 {  // Second categories targeted
		width: 50% !important; // The important can help you to get more priority again
	}
}

It's a little more complicated, the most important is to create a good selector, that is specific to your required categories listing, and so have more priority.
See this documentation to see this concept in detail.

Regards

Last edit: 4 years 1 month ago by Philip.
The following user(s) said Thank You: verzevoul

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

  • Posts: 1027
  • Thank you received: 11
  • Hikashop Business
4 years 1 month ago #316430

Would that code mean I have to select every category that exists separately and adjust it accordingly to make it pairs manually? Sorry for all the questions! I'm still figuring it out. Thanks again. I'll see what I can do.

Last edit: 4 years 1 month ago by verzevoul.

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

  • Posts: 4519
  • Thank you received: 611
  • MODERATOR
4 years 1 month ago #316440

Hello,

Yes, to be more specific, have a look on my screenshot :

alt


Here, you can see in the html class the item menu id (red bordered part), from this it's easy for you to know your html class in your Item Menu backend listing (Menus dropdown => Main Menu).
@media (max-width:600px) {  // This will lead to apply your css only on small devices (600px)
	.item_menu_html_id1,   // First categories targeted
        .item_menu_html_id2 {  // Second categories targeted
		width: 50% !important; // The important can help you to get more priority again
	}
}

Hope this is more clear for you.
Regards

Last edit: 4 years 1 month ago by Philip.

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

Time to create page: 0.074 seconds
Powered by Kunena Forum