Adapt product columns 1 to mobile

  • Posts: 39
  • Thank you received: 1
10 years 2 months ago #193976

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

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

  • Posts: 83778
  • Thank you received: 13565
  • MODERATOR
10 years 2 months ago #193978

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; }
}

The following user(s) said Thank You: alison

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

  • Posts: 39
  • Thank you received: 1
10 years 2 months ago #194176

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

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

  • Posts: 39
  • Thank you received: 1
10 years 2 months ago #194183

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

Attachments:

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

  • Posts: 39
  • Thank you received: 1
10 years 2 months ago #194199

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

The following user(s) said Thank You: proton5

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

  • Posts: 83778
  • Thank you received: 13565
  • MODERATOR
10 years 2 months ago #194202

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

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

  • Posts: 39
  • Thank you received: 1
10 years 2 months ago #194389

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,

Attachments:

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

  • Posts: 83778
  • Thank you received: 13565
  • MODERATOR
10 years 2 months ago #194399

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.

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

  • Posts: 10
  • Thank you received: 0
9 years 2 months ago #231751

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

Last edit: 9 years 2 months ago by proton5.

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

Time to create page: 0.090 seconds
Powered by Kunena Forum