the product images display in IPAD

  • Posts: 42
  • Thank you received: 0
6 years 1 month ago #287175

-- HikaShop version -- : 3.1.1

hello

I wonder how to make the product images scale to fit the screen size in IPAD, as you can see in the URL, there are three columns of products listing on page, if you use IPAD landscape view and you will see the images can not scale to smaller so the images break the outline.
how to solve it ?

and if I use IPAD portrait view, the product will be one column listing on page, is it possible to make it list in two columns ?

thank you.

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

  • Posts: 12953
  • Thank you received: 1778
6 years 1 month ago #287176

Hello,

Hello,

In your case the solution will probably be to directly use some CSS code like media queries to adapt your product image size according to your "screen size":

You can do the modifications in the frontend css file via the menu Configuration > Display > CSS
Use the @media tags to change the width of the columns when the width of the page is less than xx.

ex:
@media (min-width: 992px)
.hkc-md-4 {
width: 33.33333333%;
}

Here is some documentation about the layout customization:
www.hikashop.com/support/documentation/1...ize-the-display.html

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

  • Posts: 42
  • Thank you received: 0
6 years 3 weeks ago #289162

thank you very much.

but could you indicate how to do specifically ?

I know use media query but I do not know what selector or class even ID to apply under IPAD screen...

just make the product image not outside the frame on IPAD screen.

thank you.

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

  • Posts: 25994
  • Thank you received: 4004
  • MODERATOR
6 years 3 weeks ago #289171

Hello,

I'm sorry but that kind of help is far outside the limit of our support.

Regards,


Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

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

  • Posts: 42
  • Thank you received: 0
6 years 2 weeks ago #289253

thank you.

but all I want is a solution about how to fix the situation.

as you can see the screenshot. the product listing image all outside the frame under Ipad view.

you can run development tool of browser and simulate the Ipad view then you will see the situation.

I make the Thumbnail (width x height) in configuration is 240px x 240px, but it fit in desktop view, in Ipad view it will not so it will break the product image frame.

is there any setting or solution to make product listing images fit in Ipad view, not outside the image frame... so all I want is a solution...

thank you for helping.

Attachments:

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

  • Posts: 81361
  • Thank you received: 13037
  • MODERATOR
6 years 2 weeks ago #289255

Hi,

That's not a problem coming from HikaShop but because the template doesn't break early enough to responsive when the width reduces and your image sizes are big compared to the limits imposed by the template.
So that's something you're supposed to fix yourself.
It's actually quite easy. If you add such CSS the images width with adapt itself automatically:
.hikashop_product_image_subdiv {
width: 100% !important;
}

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

  • Posts: 42
  • Thank you received: 0
6 years 2 weeks ago #289460

thank you very much.

it works.

thank you for helping.

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

  • Posts: 42
  • Thank you received: 0
5 years 10 months ago #292768

hello

another question..

please see the screenshot, in the phone portrait view the product image is still out of box...

I tried this :

.hikashop_product_main_image_subdiv {
width: 100% !important;
}

but it do not work..

please tell me how to fix it, thank you

Attachments:

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

  • Posts: 4486
  • Thank you received: 609
  • MODERATOR
5 years 10 months ago #292785

Hello,

You have to know that from our side we design a specific HikaShop structure, unless I'm mistaken this kind of display issue isn't up to us.
Plus, you can understand that this forum's purpose is to help people to use and configure HikaShop, Customization can be a subject too of course, but we only in this case guide people (where to look and how to process) but we can spend time to provide Css code or correct Css customization.

I can only invite you to refer you to Css guides, like this one by example.
Sorry for this return.

Regards

Last edit: 5 years 10 months ago by Philip.

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

  • Posts: 42
  • Thank you received: 0
5 years 10 months ago #292864

ok, thank you.

in previous post, Nicolas answered my question by indicating the CSS code to solve the issue in product listing.
.hikashop_product_image_subdiv {
width: 100% !important;
}

but now another issue is for product detail page, I tried the CSS:
.hikashop_product_main_image_subdiv {
width: 100% !important;
}

but it not work.

I ask which HIKASHOP class can be adjusted because I do not know which HIKASHOP class can be applied, it is not customization.

you know the HIKASHOP structure much more than me, so I just want to know which class may affect the issue.

thank you.

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

  • Posts: 81361
  • Thank you received: 13037
  • MODERATOR
5 years 10 months ago #292875

Hi,

This depends on the CSS of HikaShop, but also on the CSS of your Joomla template, and how you configured HikaShop.
So it's impossible for us to precisely answer you currently as the link you had provided before doesn't work anymore and thus we can't analyse the CSS on that page as we only have a screenshot of the issue.
So please provide a working link for that page so that we can look at it.

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

Time to create page: 0.088 seconds
Powered by Kunena Forum