AbanteCart Community

eCommerce construction => General Discussion => Topic started by: kwong on April 22, 2014, 03:33:35 AM

Title: Display on iPad incorrectly
Post by: kwong on April 22, 2014, 03:33:35 AM
Hello guys,

Not sure how to properly put this, but here goes:

My site is displaying my site properly on PC and my mobile phone but things are quite out of place when it comes to iPad. How can I fix this?

Feel free to take a look:
www.tupeihookah.com

Thanks in advance.

Kwong
Title: Re: Display on iPad incorrectly
Post by: abantecart on April 22, 2014, 06:21:49 AM
Possibly this is because of modifications you did in styles (CSS) or big image that you added in the header.
You can use Firefox firebug to inspect HTML elements and you can use Responsive design view in developer tools under Firefox

Once you identify the problem you can apply fix only for ipad screen resolution in correct @media section of style.css
Title: Re: Display on iPad incorrectly
Post by: kwong on April 22, 2014, 07:29:56 AM
Possibly this is because of modifications you did in styles (CSS) or big image that you added in the header.
You can use Firefox firebug to inspect HTML elements and you can use Responsive design view in developer tools under Firefox

Once you identify the problem you can apply fix only for ipad screen resolution in correct @media section of style.css

Thanks for your prompt reply abantecart, I will try to identify the problem.

For the mean time if anyone can identify the problem here please let me know. appreciate it :)

Thanks,
Kwong
Title: Re: Display on iPad incorrectly
Post by: gordontaylor on April 22, 2014, 12:41:00 PM
As AbanteCart said, it's that large header image you have. iPad uses Safari as it's browser (unless you're installed a different one) and your style sheet would need to include the fixes for viewing on Safari.

AbanteCart developers worked very had producing this shopping cart, but there are a few issues with different browsers.

You'll need to find a webkit fix for Safari and Chrome 10+ and add it to your style sheet or get rid of that image.