Background won't align on ipad, help!
-
I have used css to align my fix my background to the bottom of the page on my blog, beesandbrownbears.wordpress.com, however, on the ipad view, the background does not stay aligned, and moves straight back up to the top of the page.
Does anyone know how I can align the background to the bottom on the ipad version too? Nothing I have tried so far is working!The blog I need help with is: (visible only to logged in users)
-
I reviewed your custom CSS and found several syntax errors. It would be good to fix all of them in case the ones at the top are affecting the CSS below in weird ways.
First, at the very top I see this:
@media screen and (min-width: 801px) { #wrapper { width: 850px; position: relative; left: -15%; } } } }That’s two extra “}” symbols that aren’t needed. Be careful about making sure the right number of opening and closing curly braces are used for each section. You should remove the two extra “}” braces from that section.
Inside the “@media screen and (min-width: 801px) { }” section, I see another @media rule nested inside that one:
@media screen and (min-width: 81px) { body { background-position: bottom center; } header#masthead { margin: 0; }The curly braces there aren’t closed properly. You should move the section starting with “@media screen and (min-width: 81px) {” outside of the 801px section and make sure both have a proper closing curly brace.
In this section:
@mediascreen and (device-width: 768px) { body { line-height: 1; background-position: center bottom !important; } }“@mediascreen” needs a space before screen. And “device-width: 768px” means that the CSS in that block will only apply to devices that are exactly 768px wide. Usually most people use something like “max-device-width: 768px” instead to cover that width and everything smaller. Note that if you use “device” then online tablet previews like the one in the Appearance > Customize live preview won’t work because the “device” part means the rules will only apply to an actual device. This is no problem but just means you have to make sure check an actual iPad when testing. To get around that, a lot of people will use “max-width” instead of “max-device-width.” All of this said though (!) you probably don’t need that “(device-width: 768px)” section at all if you fix the other rules above it.
Here is an update version of your current custom CSS with the errors fix that you can copy and paste into your Appearance > Customize > CSS editor to try it out: http://pastebin.com/KXRbEYp6 (link is good for 7 days)
Once you’ve, saved changes, check out the “CSS Revisions” panel at the top right of your Appearance > Customize > CSS panel. It will show a cool diff of all the latest CSS changes you’ve saved.
-
Thank you so much for your help, this seems to have worked perfectly on the customization ipad view, although I am yet to try it on an actual ipad.
Thank you again for your help and time! -
Cool. I think it will work on iPad the same way since I took out the “device-width” media query. That was the one to watch out for. :)
-
I’ve just checked on an ipad, and although the background image is now at the bottom of the page, it is not fixed there, so moves with the scroll! It is fixed everywhere else, and on the ipad customization preview, so very bizarre. Is there any way to fix it on the ipad view?
-
I think that’s a limitation of the Safari browser on iOS. If you search, there are a few threads about a hack trying to get around that ( i.e. http://stackoverflow.com/questions/16009035/fixed-position-background-on-ios ) but that hack won’t work on WordPress.com because you would need to add a new HTML tag inside the body tag and adjacent to the other child content container elements and that is not something WordPress.com offers the option to change.
- The topic ‘Background won't align on ipad, help!’ is closed to new replies.
WordPress.com Forums 