Tagged: color section, fixed, responsive, scroll
-
AuthorPosts
-
March 9, 2014 at 6:56 pm #234419
I have set the “Background Attachment” to “Fixed” as that’s the effect I want to have. However, when it’s set to “Fixed”, the image is not displayed on the iPhone or iPad. I set the “Background Image Position” to “top center” as you suggested in https://kriesi.at/support/topic/image-in-color-section-not-appearing-on-iphone/ but it’s still not visible, but that did not help. The only way I could get it to display was to set the “Background Attachment” to “Scoll” but then I don’t get the effect I want on the non-mobile devices.
Do you have any suggestions to achieve what I want? Maybe some custom CSS for mobile?
Thanks in advance for your help with this.
March 10, 2014 at 5:54 am #234488March 10, 2014 at 12:39 pm #234636Hi Ismael – The site is at: http://www.got2bmoving.com. There are 2 fixed color sections that are not visible on iPad/iPhone: One is below the “New York Traffic Image Credit: BBC News • http://www.nytimes.com”, “Paris Traffic Image Credit: BBC News • http://www.bbc.co.uk”, and
“Moscow Traffic Image Credit: Voice of America • http://www.voanews.com” headers and the second is below the “Join our campaign to end traffic gridlock” image.
Thanks!March 11, 2014 at 4:57 pm #235645Hi!
Can you try it with the parallax setting (basically the same thing as fixed)? I’m not getting any issues on my end but it could be a issue of forcing the device to change its rendering.
Regards,
DevinMarch 11, 2014 at 10:56 pm #235926Hi Devin,
Thanks for your suggestion. Yes, when I change the setting to “Parallax” it appears nicely on the iPhone and iPad. The downside is that I don’t see the cool effect on the laptop/desktop where the image is fixed and you see different portions of it when you scroll down the page. Just FYI, on http://www.got2bmoving.com, I have set the first color section (the one below the “NY Traffic, etc” images) to “fixed” and the 2nd color section (just above the footer) to “parallax”.
The 2 devices that I’m trying to view this on are the iPhone 4s with OS 5.1.1 and the iPad (Model A1219 with OS 5.1.1). I don’t see the “fixed” color section on either of these. Maybe there is some custom CSS that I can add so that I can retain the “fixed” setting and also view it on these devices?
Let me know what you think.
Thanks!
JaneMarch 12, 2014 at 4:19 am #236064Hi!
Set the background attachment to fixed then try this on Quick CSS or custom.css:
@media only screen and (max-width: 989px) { #av_section_3, #av_section_6 { background-attachment: scroll !important; } }
Let us know the effect on iPad.
Regards,
IsmaelMarch 12, 2014 at 7:29 am #236148Hi Ismael, This works perfectly on the iPhone and the iPad. Both sections are displayed and we get the neat effect of the “fixed” sections on the laptop/desktop. Thanks so much for helping me figure out the custom CSS to make this happen.
– Jane -
AuthorPosts
- The topic ‘Color Section not visible on mobile devices w/ "Background Attachment" = "Fixed"’ is closed to new replies.