Dave Harrison Posted November 16, 2017 Share Posted November 16, 2017 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 Link to comment Share on other sites More sharing options...
Ingolme Posted November 17, 2017 Share Posted November 17, 2017 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. Link to comment Share on other sites More sharing options...
Dave Harrison Posted November 24, 2017 Author Share Posted November 24, 2017 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 Link to comment Share on other sites More sharing options...
Ingolme Posted November 24, 2017 Share Posted November 24, 2017 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. Link to comment Share on other sites More sharing options...
Dave Harrison Posted November 24, 2017 Author Share Posted November 24, 2017 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! Link to comment Share on other sites More sharing options...
dsonesuk Posted November 24, 2017 Share Posted November 24, 2017 (edited) 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted November 24, 2017 Share Posted November 24, 2017 (edited) View this https://www.w3schools.com/code/tryit.asp?filename=FLTFJSRL526S to see if problem remains. Edited November 24, 2017 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now