I have a problem with this page:


It seems okay at a normal browser width; but, the logo and the three lines of text under it do not center with each other on an iPhone. This is most apparent in horizontal view. This effect can be emulated with a computer browser by narrowing the width of the browser window; the text keeps centering in the window after the logo stops...

I do have something unusual going on with this page: the width and height are set to 100%, instead of a fixed dimension. This is because I want to use this site as a kiosk which will have a width of 1900 pixels. I didn't want the web site to have such a wide width, so I set it to 100%. That's when the centering problem began. There is no entering problem when a fixed width is used.

Any ideas?

1 answer


Your image has horizontal padding and an auto margin to center it.

when the width of the viewport is smaller than the total of the image and padding it puts in a horizontal scroll bar.

The h1 containing the text can shrink to suit the width of the viewport and as the text is centered it will move accordingly.

Taking the horizontal padding off the image will improve things.

getting cleverer still, size the image width as a percentage (in CSS, remove width and height from the html) and the image will shrink as the window gets narrower

Answered over 7 years ago by Tony Crockford