2 column products in mobile display

  • Posts: 28
  • Thank you received: 0
5 years 1 month ago #304623

Hi,

I have selected 3 products in a row for the normal desktop view. On mobile it breaks into 1 column displaying 1 product, I would like to display 2 columns for mobile view.

Have used the code from the threads below but the codes are not working for me.
www.hikashop.com/forum/product-category-...mber-of-columns.html
www.hikashop.com/forum/search.html?query...ldforums=1&catids=26

How do I achieve the display of 2 column products in mobile? Thank you.

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

  • Posts: 4509
  • Thank you received: 611
  • MODERATOR
5 years 1 month ago #304636

Hello,

To achived what you need there will be several css command to add in your frontend css file.
First have a look on this tutorial , then you have to get the required @media (media queries) to add your custom code.

For start and as example this kind of code may do the trick :

@media only screen and (max-width: 600px), (max-device-width: 600px) and (min-device-width: 600px) {
    .hikashop_column_product_container {
        width: 49%;
        display: inline-block;
        vertical-align: top;
    }
}
Where @media define on which device width the css command must be applied, and note that above it's pseudo code, you have to get the required html class by using the inspector tool to get your required html class.



Hope this will help you to achieved what you need.
Regards

Last edit: 5 years 1 month ago by Philip.

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

  • Posts: 440
  • Thank you received: 20
  • Hikashop Essential
4 years 10 months ago #306996

I have managed to achieve this using the following code on a 3 column layout. This takes into account devices up to 960px. This allows for 2 columns on tablet devices and larger screen mobiles. Other adjustments may be required.

@media only screen
and (max-device-width : 961px)
{
 .hkc-md-4 {width:49%;float:left;} 
 .hikashop_product_image_subdiv {width:auto!important;}
 .hikashop_product_image {height:auto!important;}
}

Dave

Last edit: 4 years 10 months ago by davec.
The following user(s) said Thank You: nicolas

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

  • Posts: 1
  • Thank you received: 0
3 years 3 months ago #328298

Hallo ,
I can't get this option ( I am to stupid for this :P :P ) with the view of 2 colums on mobile devices for categories and product listing ( I am not a web designer and know little of coding and css ) what I have to add in the frontend css file I have the starter version ( www.robert-dabo.from.hr ) coud you please help me.
In the picture is the viev on mobile of product listing in one colum, but I want it to be in 2 colums ( for categories and product listings )

Attachments:

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

  • Posts: 4509
  • Thank you received: 611
  • MODERATOR
3 years 3 months ago #328314

Hello,

To achived what you need there will be just one css command to add in your frontend css file.
First have a look on this tutorial , then you have to get the required @media (media queries) to add your custom code.

Learn more about the Css @media queries in this documentation on the W3school website .

Then, follow the example of in Davec's message, here to modify your element width, with this kind of command :

.context_page_class .targeted_html_element {
    width: 49%;
}
Hope this will help you to achieved what you needs.
Regards

Last edit: 3 years 3 months ago by Philip.

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

Time to create page: 0.097 seconds
Powered by Kunena Forum