Forum Replies Created
-
AuthorPosts
-
davidd
MemberNeat resource. Thanks again for the attention!
davidd
MemberThat's right, Gandt. I used the hack above to align the images properly and the background-attachment: scroll to avoid the CPU overload.
davidd
MemberHi Gandt,
Thanks for checking out my site. The issue isn't with the parallax effect, which apparently is a CPU hog on small devices, it's with background-size:contain, which apparently doesn't work so well in iOS. I fixed it by using background-size: 200% contain; It made the image the right size and the vertical dimension fit to contain the text. Don't ask me why that worked, but it did!
David
davidd
MemberThanks Gandt. There's more information on the separate thread:
davidd
MemberHeres' the site http://emily.viewfarm.com/
I also did this totally goofy thing that seems to have worked.
@media only screen and (max-width: 1140px) { .home-section-1, .home-section-3, .home-section-5 { background-attachment: scroll; background-position: top; -webkit-background-size: auto contain; -moz-background-size: auto contain; background-size: auto contain; } }
davidd
MemberHoly Toledo, I played and played and this is what I did that worked for my case. I'm sure this shows the clown shoes, but it seems to be working okay.
@media only screen and (max-width: 768px) { .home-section-1, .home-section-3, .home-section-5 { background-attachment: scroll; background-position: top; -webkit-background-size: 200% contain; -moz-background-size: 200% contain; background-size: 200% contain; } }
davidd
MemberHere are some hints about the issue. https://css-tricks.com/forums/topic/full-page-backgrounds-on-ios-background-size-cover/
davidd
MemberI did find this explanation for iOS issues that might explain the problem. I don't quite understand the solution.
https://css-tricks.com/forums/topic/full-page-backgrounds-on-ios-background-size-cover/davidd
MemberThanks for keeping this issue at the top of the list. This seems to be a common one. I've seen it in at least 15 other posts with no solution. braderz31's idea is as close as I can get, but it doesn't work on phones. Any heroes out there?
Even a snippet for replacing the images on smaller screens would be nice, but it would be better if some good 'ol (new) css would do the trick.
davidd
MemberI have the same problem I'm trying to resolve, here http://www.studiopress.community/topic/parallax-home-image-not-working-on-phones/
davidd
MemberHey!!! I found a solution at this link:
http://thepixelista.com/responsive-genesis-child-theme-logo/I disabled the header support which immediately made my css show up perfectly. Thanks!
David
davidd
MemberThank you Jami. Jessica Barnard's solution totally worked for my needs.
-Daviddavidd
MemberThanks Davinder,
I tried your idea to add !important in the css, but the injected code from the header customization WordPress or Genesis provides has !important too. I tried using the Genesis header scripts in the Theme Settings which says "The wp_head() hook executes immediately before the closing </head> tag in the document source," but that's not true. The injected code from WordPress gets inserted after the hook and before the </head> tag so the !important gets overridden.
I'll share it now so you can see. I have to cover it up soon because my clients don't want it out there yet.
The code I've injected using the wp_head() hook is this:
<style type="text/css">
.site-title a { background: url(http://www.zebramedtech.com/wp-content/uploads/logo-360-tall.jpg) no-repeat !important; }
</style>It's being overridden by what I assume is injected by the header customization.
.site-title a { background: url(http://www.zebramedtech.com/wp-content/uploads/logo-brooklyn.jpg) no-repeat !important; }Thanks again,
Daviddavidd
MemberThank you!!!
-
AuthorPosts