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.

i tried adding text-align:center; to body or #main-container - but no luck ( — moonvader, Aug 14 '13 at 18:59
Apply it to #main-container. I've tested it on a version of chrome that runs webkit (same rendering engine ). — mrmoje, Aug 14 '13 at 19:19
if i apply it i can see that text inside #main-container is centered, but i want #main-container to be in center of page (sorry if i didn't expain it correctly) — moonvader, Aug 14 '13 at 19:28
Kindly add a screenshot to your post of how your safari renders it — mrmoje, Aug 14 '13 at 19:46
http://imageshack.us/photo/my-images/841/4rem.jpg it is ipad's safari — moonvader, Aug 14 '13 at 19:55

score 0 · Answer 1 · answered Aug 14 '13 at 20:35

0

i found interesting solution - add meta tag to my website

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

answered Aug 14 '13 at 20:35

moonvader

19,761
18
67
116

score 0 · Answer 2 · answered Aug 14 '13 at 20:37

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.

thank you a lot! i will think about how can i can reduce site width. — moonvader, Aug 14 '13 at 20:45

score 0 · Answer 3 · answered Jun 10 '23 at 02:45

0

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

answered Jun 10 '23 at 02:45

Tom

1

This was an old question regarding web design. A good design should not force the user to change settings in the browser to make the site look right. In this case, the designer needed to implement media queries so that the width of his/her elements did not overflow the view port. If you are designing a website today and you are not using media or container queries, then you are not doing it right. Check out https://www.w3schools.com/css/css_rwd_intro.asp for more info on responsive design. – wileyCoyote Jun 18 '23 at 19:43

Website left aligned on iPad in Safari and Chrome

3 Answers3