Mobile Version not showing the right sizing

Hi, I'm using Storefront template with Hikashop plugin.
However, it's strange that on my desktop, when I rescale the window size to 320px width, it scales properly.
See attached.


But when I view it on my phone, it doesn't scale to the device width.



Could you please help? Thanks.

Hi

When I open Your site all I can see is PHP info page. Please restore it for me so I'll be able to check.

Hi

When I open Your site all I can see is PHP info page. Please restore it for me so I'll be able to check.

Hi thanks for checking. You can see the site in http://andypoint.sapura.com.sg/sales/

Also, the Added to Cart iFrame box is showing wrong size (too big) when the screen size is reduced to around 1126.

Let me know if you need backend access. Thank you.

Hi

Ok, now it was easy It's the image in header which is resizing the template and do not allow to use roesponsive options. Add this to override.css to fix this problem:

Code: Select all

#gkHeader {
    overflow: hidden;
}


it will cut the image to the 100% of screen width.

Hi Teitbite,

I've added the code, but it is still the same, the scrollbars are showing.


On desktop, if you shrink resize the window down a little, it'll suddenly expand.


On mobile size.. it is showing too big.

Also, there seemed to be inline style controlling the size of the image. Can this be removed?
When the screen is small, the inline style is forcing the image not to scale down..
This is the problematic code

Code: Select all

<div style="position:relative;text-align:center;clear:both;width:600px;margin: auto;" class="hikashop_product_main_image_subdiv">

Hi

Try add this to override.css:

Code: Select all

.hikashop_product_main_image_subdiv {
width: 100% !important;
max-width: 600px !important;
height: auto !important;
}


and this to http://andypoint.sapura.com.sg/sales/te ... _frame.css

Code: Select all

input#hikashop_add_to_cart_continue_button,
input#hikashop_add_to_cart_checkout_button,
input.hikashop_cart_input_button {
    width: 310px;
}