Template examples / h3 classes not centered on iPad

[Dave Harrison]

I'm new to w3schools and forum, forgive me if this belongs in the General section.

I've been attempting to learn responsive web design from bottom to top from a book I loaned from the library. The examples are always incomplete and the code never seems to be consistent from one example to the next. Thought I'd take a look at your templates and see about learning from top on down. 

While experimenting with the parallax template I notice the section headings are not centered on my iPad (granted it's one of the old iPads). Attached is a screen shot of how your template looks on my iPad. Is there a fix for this?

Any reply appreciated. Love the templates w3schools provide and look forward to figuring it all out.

Dave

[Ingolme]

I can't tell for sure why that's happening just from the screenshot, I would need to actually see the image and code, or the page itself, in order to be sure.

If that is a background image which is not extending to the full width of the element then it means the image is not large enough, you can set the background-size to "100% auto" (100% wide and height adjusts based on the image's aspect ratio) or center the image if you prefer.

If the background image is large enough and is actually reaching the full size of the container then that means something is getting outside of the container and you would need to find out why.

[Dave Harrison]

Thanks, Ingolme.

Sorry, I might not have been clear in my original post. But do you see how the "MY WEBSITE LOGO" displays to the right in the above screenshot? It is centered on my laptop and phone. Same goes for the other headings when you scroll down on the ipad. They're all shifted to the right and not centered.

Here's the link to the actual template: https://www.w3schools.com/w3css/tryw3css_templates_parallax.htm#about

Any idea from looking at the code on your end?

I appreciate your time and reply!

Dave

[Ingolme]

I suspect that your iPad's browser is very out of date. From your screenshot I would guess that it does not support the CSS transform property.

[Dave Harrison]

Thanks! I'll have to check that out at the Apple store next time I'm there.

I pretend I'm interested, but I'm really just seeing how web pages display!

[dsonesuk]

I don't know why they didn't just use display: inline-block: for text container element with text-align: center; and vertical-align: middle; for parent instead.

Edited November 24, 2017 by dsonesuk

[dsonesuk]

View this

https://www.w3schools.com/code/tryit.asp?filename=FLTFJSRL526S

to see if problem remains.

Edited November 24, 2017 by dsonesuk