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.

Hi,

There is no option for that.
With custom CSS you should be able to achieve that:

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 ?

Hi,

In your case, you want to use such code:

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).



Is it a way that I can make the "product name" font size a little bit smaller when I hold to mobile in narrow view ?

You want to force the height of the area with such CSS:
.hikashop_products .hikashop_subcontainer { height: 350px !important; }

Perfect, it works like a charm

Is it possible to apply this css code so it is only used on the "categories listning" with all the products, and not on the product page ?

The reason for this is that when I apply the code is put's (in mobile view)the "add to cart" button on the right side off the image, and not below where it should be.

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

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,

Please provide a link to the page with that modification in place so that we can have a look at what's going on there.

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,

Add that CSS and it will work like you want:

Hi Nicolas,

Thanks that works perfect! :woohoo:

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!

The CSS of your template is quite messy.

Then you can turn off bootstrap, and use such CSS to make the listing responsive wtihout bootstrap:
www.hikashop.com/forum/product-category-...p-option.html#211235

Thanks it works