Mobile view - display 2 products side by side

-- url of the page with the problem -- : www.fsfightgear.com.au/
-- HikaShop version -- : 2.3.3
-- Joomla version -- : 3.3.6
-- PHP version -- : 5.4.33
-- Browser(s) name and version -- : any

Hello,

I am using Hikashop and Bootstrap. Is there a way for the shop products to fall into 2 products in a row on mobile view and not just one? It is a lot of scrolling with only one product in a row.

Thank you
Kind regards
Lene

Sorry, this should have been in the 'product and category' topic.

I will try that.

Thank you
Kind regards
Lene

Joomla 3.4.1
Hikashop 2.4.0
Yootheme template Unity version 1.0.8 (latest version)
URL: kvikki.no

I also want my stores products to fall into 2 products in a row on mobile view.

I tried the above code. But it only moves the products to the left, using 50 % of the screen, and displaying one product pr. row.

Any more advice ?

This is excellent. I looks very good on my HTC mobile phone.

There is only on small problem. That is when the product name is a little long, and it becomes a big gap under the product. (see picture below).

Perfect, it works like a charm =)

Hello,
A solution can be to use that kind of CSS code :

@media (max-width: 767px){
.hikashop_category_information [class*="span"], .hikashop_category_information .uneditable-input[class*="span"], .hikashop_category_information .row-fluid [class*="span"] {
width: 49.5% !important;
float: left !important;
}
}

Hi,

I also want to show my products in a row of 2 products on mobile view.
I tried the codes above, but it does not work for each line (See attachment)

Any advice ?

Thanks

Hi Nicolas,

send the links as a private message to you!

And when i enable the Bootstrap option, the loginform in the checkout isn't working correctly

Thanks!

each first item of row ( the item of the first column) is not manage by the same css code compare to item of other column ( colé and col3) .
this behaviour is explain by this code

.hikashop_product_column_1, .row-fluid .hikashop_category_column_1, .row-fluid-7 .hikashop_product_column_1, .row-fluid-7 .hikashop_category_column_1, .row-fluid-8 .hikashop_product_column_1, .row-fluid-8 .hikashop_category_column_1, .row-fluid-10 .hikashop_product_column_1, .row-fluid-10 .hikashop_category_column_1, .row .hikashop_product_column_1, .row .hikashop_category_column_1 {
margin-left: 0 !important;
clear: left;
}
so each time hiakshop or css guy ll use !important ; there ll be some area where the default rules of CSS ll not apply and you ll have toknow this area or ask t othe developper howto override this behaviour .

best l lbe e documentation page where hikashop css guy explain how the layout is design or look at the php code .
I do this many months ago ....

Hi Nicolas,

Thanks that works perfect!

Is this also possible without Bootstrap? Because when i enable the Bootstrap option, my buttons at the checkout look as in the attachment 1. It first looked always like attachment 2

Thanks!

Thanks it works