Adapt product columns 1 to mobile

-- HikaShop version -- : 2.3.0
-- Joomla version -- : 2.5.8
-- PHP version -- : 5.5

Hello,
I have a responsive template and on mobile devices are displayed correctly menu items, header, etc. Except HikaShop columns shown 4 that are configured to display.
My question is how do you display in 1 column on mobile?
I hope you can help me.
Thank you very much.
regards

Hi,

You need to turn on the "use bootstrap design" option of the Display tab of the HikaShop configuration. This requires that the template is compatible with bootstrap. But it doesn't seem that it is the case on your website.

And in that case, you're left with adding custom CSS in your joomla template to handle the responsive. For example, something like that:
@media only screen and (max-width: 800px) {
.hikashop_product{ width: 100% !important; }
}

Nicolas hola,
thanks for your answer, it has served me well for displaying products in a column in the mobile device.
Now I need suit is the checkout.
You can not purchase them because the form is not centered on the screen for editing.
I await your response.
thank you very much

I've noticed that the images do not fit the column width to low screen resolution.
As can be configured to fit in different resolutions. O devices such as iPad.
attached image

the product columns has managed following your instructions and I've also added more references pixels. As follows:
@media only screen and (max-width: 1115px) {
.hikashop_product{ width: 30% !important; }
}

@media only screen and (max-width: 948px) {
.hikashop_product{ width: 50% !important; }
}

@media only screen and (max-width: 414px) {
.hikashop_product{ width: 50% !important; }
}

@media only screen and (max-width: 375px) {
.hikashop_product{ width: 100% !important; }
}

@media only screen and (max-width: 320px) {
.hikashop_product{ width: 100% !important; }
}

You think it's a good way as this?

The theme of chekout not know how to fix it, I hope your help.

thank you very much

You can use such CSS yes. The CSS code I gave was just a simple example.

For the checkout, you'll need further CSS like the one I gave using the @media CSS system.
The main thing would be to move the registration area below the login area:
www.hikashop.com/support/support/documen...tml#registration_box

Hello,
I've been checking the display on different devices.
Mobile is ok.
For iPad does strange as shown in the picture I attached things, blows algundos products, I guess it's because of the height of these and not fit to not overlap must jump.
How could fix it?

---

---

Regarding ckekout, how do I emplementar the code you mention me alone pra Phones Devices I have a sheet for responsive CSS code, but not code or how to put it.

Thank You,

Hi,

1. In that case, you want to force the height of the product boxes to a height which fits to your template design.
For example:
.hikashop_products .hikashop_subcontainer{
height: 260px;
}

2. The link I gave you tells you want CSS to add. Just add it like you added the first piece of CSS I gave you and that's it.

Thank you. This works for me

I use a similar code to fix the responsive issue in my site (template with not bootstrap support):

@media only screen and (max-width: 1115px) {
.hikashop_product{ width: 30% !important; }
}

@media only screen and (max-width: 948px) {
.hikashop_product{ width: 50% !important; }
}

@media only screen and (max-width: 414px) {
.hikashop_product{ width: 50% !important; }
}

@media only screen and (max-width: 375px) {
.hikashop_product{ width: 100% !important; }
}

@media only screen and (max-width: 320px) {
.hikashop_product{ width: 100% !important; }
}

Regards