Hikashop main image - Mobile device fit to screen

-- url of the page with the problem -- : 5.10.105.46/~yamitysb/
-- HikaShop version -- : 2.3.1
-- Joomla version -- : 3`
-- PHP version -- : 5.3.28
-- Browser(s) name and version -- : ios Safari

Hi,

I would like to get the product image fit the screen size on a mobile phone, now it is to big and it shift the display to the right (image attached - mobile_screen_shift_R.png)

My Configuration & Template
In the Configuration > Display > see bootstrap design = YES
template - T3BS3

When I change in configuration > main > image > Product page image width = 200
Product page image height = 200 the problem is fixed (image attached - image_size.png)

I have put this code in Configuration > Display > CSS

@media (max-width: 767px) {
#hikashop_main_image { width: 49% !important; float:right; margin:0;}
}

but it is still does not work

the final display should look like this (image attached - moible_screen_ok.png)

What can I do to probably display the product image on mobile devices?

Please advise
Thanks
M

Hello,
The solution will just be to adapt a little more CSS code using the media query : @media (max-width: 767px)

Hi Thanks for your replay,

I have put this code
@media (max-width: 767px) {
#hikashop_main_image { width: 49% !important; float:right; margin:0;}
}

but it did not work.
Can you help what css code I should put to make it work

Thanks
M

Hi,

I just simulate a mobile screen on my browser and the image seems to have a correct size.
Here is documenation for customizations:
hikashop.com/support/support/documentati...ize-the-display.html

As it's a template issue, so customizations etc, we don't really support this, please contact your template provider for further details if it is a HikaShop compatible template.

Hey,
if you can please just tell me in which display exactly and where i can put a piece code for the product image to be smaller at small devices i can fix that.
Adi

Hi,

The documentation link provided by Xavier explains where to add your piece of CSS code :
hikashop.com/support/support/documentati...ize-the-display.html
There, add some @media CSS code to force the image size based on the device width:
appendto.com/2014/03/responsive-approach-image-scaling-css/