Website left aligned on iPad in Safari and Chrome

Question

I am having problems with center alignment on iPad. it is not working properly in iPad Safari and iPad Chrome browser - i tried all advices that i found on web - but i found no solution to my case.

My website is newgranatik.tw1.ru and problem in this middle (main) block.

Answer 1

i found interesting solution - add meta tag to my website

<meta name="viewport" content="width=[widest centered div];"/>

Answer 2

I have taken a detailed look at your site. The problem is that when you reduce the width of the browser ( or view it on a lower resolution device ), the #main-container centers itself with {margin: 0 auto} BUT #header remains static with a width of 1200px and therefore they both fail to align!

Reproduce how your iPad is rendering by reducing the width of your browser window (on your desktop).

I recommend making your header auto-resize & auto-center. You could start by reducing the size of the logo for lower resolution/mobile screens using css.

Otherwise, the site has a nice design.

Answer 3

Same issue here. I tried this and it worked Settings-go to Display&Brightness-go to Display Zoom-click on More space - Done