Show products in columns for mobile

  • Posts: 125
  • Thank you received: 6
  • Hikashop Business
3 years 2 months ago #329668

-- HikaShop version -- : 4.4.0
-- Joomla version -- : 3.9.22
-- PHP version -- : 7.4

Hello,

I am trying to see how I can show the latest products module on mobile devices with 2 columns. Currently the module is just showing one column where visitors will have to scroll one by one. Is there a way or script that I can apply that will allow side by side products for latest products module on mobile views?

Thanks N Advance

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

  • Posts: 4502
  • Thank you received: 610
  • MODERATOR
3 years 2 months ago #329688

Hello,

This will required some Css knowledge and a good mastery of the "@media" command.
See this documentation how to add custom Css Command

Now in order to advice & guide you :
1. DON'T modify hikashop.css file that manage the HikaShop Grid system
=> Use it to copy your required command, like this example :
@media (min-width:768px) {
.hkc-sm-11 { width:91.66666667%; }
.hkc-sm-10 { width:83.33333333%; }
...
.hkc-sm-2 { width:16.66666667%; }
.hkc-sm-1 { width:8.33333333%; }
}
=> To modify it to achieved what you need

2. Then paste it at the end of your frontend file css (or style.css) to override default HikaShop command.
=> You can use an "!important" to increase your command priority, and be sure to override default command.

3. You have to readjust "width" command and his value, to switch it like this example :
@media (min-width:768px) {
.hkc-sm-11 { width:50%; }
.hkc-sm-10 { width:50%; }
...
.hkc-sm-2 { width:50%; }
.hkc-sm-1 { width:50%; }
}

Hope this will help you to achieved what you need, and stay available for more guidance.
Regards

Last edit: 3 years 2 months ago by Philip.
The following user(s) said Thank You: dklbwf

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

Time to create page: 0.047 seconds
Powered by Kunena Forum