-
Posts
-
I’m having a similar issue with the way my Color Section background image displays and is positioned on the iPad and iPhone 6 as referenced in a previous topic on this forum – https://kriesi.at/support/topic/background-image-on-ipad-displaying-huge/.
I’m using the latest theme v3.1.5 and WordPress 4.2.2.
Here are the settings I have in the Color Section.
Section Layout tab
Section Minimum Height: At least 100% of Browser Window height
Section Padding: No Padding
Section Top Border Styling: No border styling
Section Bottom Border Styling: No border styling
For Developers: Section ID: hero-bg-mobileSection Background tab
Background Attachment: Parallax
Background Image Position: Top Center
Background Repeat: No RepeatI have tried using a variety of CSS techniques to manipulate the image to fit the screen properly on the full size iPad and iPhone 6, but nothing worked. The image is always blown up slightly and also the background position of the image is always set to bottom no matter what I do so the top of the image is cut off and the bottom part shows fine.
After doing some testing between the two versions of the Enfold theme I have ( v3.0.8 and v3.1.5 on separate servers) I discovered that the issue I’m describing on the iPad and iPhone 6 does not present itself if I’m viewing the site with the older theme version v3.0.8. It only appears to be a problem when viewing the site with the them version v3.1.5.
FYI, there are no issues when viewing the v3.1.5 theme site on the iPad mini or iPhone 4.
Can you shed any light on what may have been changed since v3.0.8 that could be causing this issue with color section parallax background images only on the iPad and iPhone 6?
See iPhone 6 screenshot comparisons between theme versions 3.0.8 and 3.1.5 for reference purposes.
LINK: https://www.dropbox.com/s/dte24akynpk6sx8/enfold-theme-versions.jpg?raw=1See actual background image being used in color section for reference purposes.
LINK: https://www.dropbox.com/s/bisdtz0iwcnhvgo/Hero-Image-1920-wide.jpg?raw=1UPDATE
I originally stated there was no issue viewing the color section parallax background image on the site with the Enfold version 3.1.5 theme on an iPad mini, but now I’ve discovered that the same issue is happening on the iPad mini if it has the IOS 8.0 software. Another older iPad mini with IOS 6.0 I tested the site on earlier does not have any issues.
So now I’m seeing a two-fold problem. The color section background parallax image having the background position always set to bottom and the image always being blown up occurs on any IOS device with IOS 8.0 (haven’t tested IOS 7.0) in combination with viewing a site with the Enfold theme version 3.1.5.
For Enfold theme version 3.0.8 all IOS devices with the two versions of IOS software I’ve tested (6.0 and 8.0) view the parallax background image correctly in terms of size and positioning.
I’d appreciate any fixes for this issue.
I know you guys are busy dealing with so many support requests at once, but any insight on fixing this issue would be much appreciated. Thanks.
Anyone else having this issue? Any feedback or suggestions to fix the issue would be much appreciated.
I really would appreciate some kind of response from the support staff. Otherwise I may need to abandon this theme and look elsewhere. My client is getting impatient waiting for the site to be completed.
I started a new topic hoping this time someone will respond. Seems like the fix shouldn’t be too hard to come up with. All CSS, right?
https://kriesi.at/support/topic/color-section-parallax-background-image-iphone-and-ipad-issues/
Hi,
Can you please create us a WordPress administrator account? post it here as a private reply.
P.S. Sorry for taking this long to respond but thing is, pushing the topic actually causes the contrary effect as our queue displays tickets based on activity (less active threads are shown first).
Regards,
JosueHey!
Try adding this code to the Quick CSS (in the 3.1.5 site):
.av-parallax { height: 100% !important; }Cheers!
JosueI’m actually having the same issue, and the above code didn’t work for me. I’ll be following this thread to see if there’s any more insight, if not I’ll start a new support request. Good luck killyman!
Hey Josue!
Ok, great, thanks!
It’s http://www.tylerschlicting.com/
Right there on the homepage there are a series of color sections with centered images in each one. The images are text, but images nonetheless. I just noticed today that they’re displaying huge on mobile- specifically android 4.2.2.
Thanks a lot, this is outstanding support as usual.
Try adding this code to the Quick CSS:
@media only screen and (max-width: 767px) { .home .avia-bg-style-fixed { background-size: 90% 5%; } }Cheers!
JosueHm, it still doesn’t seem to be working. I refreshed repeatedly, turned the device off & on, opening an incognito browser, kept refreshing, and the images in each color section are still displaying as giant. Very weird. Just to be clear, it’s only happening on the android device, not desktop.
I’ll keep trying to refresh though it doesn’t seem to be helping…
Hm, try the following instead:
@media only screen and (max-width: 767px) { .home .avia-bg-style-fixed .av-parallax { background-size: 90% 5% !important; } }Well, that didn’t work either, though interestingly what it did do was to make the image huge on desktop too when I selected “parallax” for the color section. In other words, I reproduced the problem on desktop. When I switched back to the “fixed” option, the issue went away on desktop, but still persists on the mobile device, even after lots of refreshing.
If it helps with troubleshooting, I’m almost positive this wasn’t a problem before the last update, so maybe it has something to do with that?
Hi again,
For clarity’s sake, I have an image of the problem followed by the desktop screenshot, which is displaying normally. As you’ll see, in the mobile version the image (which, again, is text but actually an image) is WAY oversized, to the point of not being readable at all. Yes the first pic is an actual photo of the mobile device since I’m not sure how to take a screenshot of it.
Here it is:
And the way it’s supposed to be:
Hi,
Wanted to provide an update. By playing around with the values, I found that the following numbers in the CSS give a functional result. The image isn’t centered within the color section, rather looks more “centered top” (even though centered centered is selected). But at least it displays at normal size.
Here are the new numbers for anyone else with the same issue:
@media only screen and (max-width: 1000px) {
.home .avia-bg-style-fixed .av-parallax {
background-size: 70% 10% !important;
}
}Thanks for the help Josue!!
Thanks Josue. Your suggested fix seems to have resolved the issue on the iPhone and iPad.
.av-parallax {
height: 100% !important;
}But, I had to apply the suggested fix only to mobile screen sizes in my custom CSS (child theme style.css file) because the suggested fix by itself caused issue with the parallax background image positioning, etc. when viewed on computer browser screen sizes.
So below is what I added to my custom CSS (child theme style.css file) and all seems fine now.
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
{
#hero-bg-mobile .av-parallax {
background-image: url(http://acme.com/wp-content/uploads/2014/07/parallaxbackgroundimage.jpg)!important;
}
.av-parallax {
height: 100% !important;
}
}@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)
{
#hero-bg-mobile .av-parallax {
background-image: url(http://acme.com/wp-content/uploads/2014/07/parallaxbackgroundimage.jpg)!important;
}
.av-parallax {
height: 100% !important;
}
}Thanks again for your help with this!
You are welcome, glad to help :)
Alternatively you can prefix the
avia_mobileclass to any selector you want to be effective only on mobile devices..avia_mobile .av-parallax { height: 100% !important; }Regards,
JosueOkay. So you mean I can replace all of this…
@media only screen
and (min-device-width: 320px)
and (max-device-width: 568px)
{
#hero-bg-mobile .av-parallax {
background-image: url(http://acme.com/wp-content/uploads/2014/07/parallaxbackgroundimage.jpg)!important;
}
.av-parallax {
height: 100% !important;
}
}@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)
{
#hero-bg-mobile .av-parallax {
background-image: url(http://acme.com/wp-content/uploads/2014/07/parallaxbackgroundimage.jpg)!important;
}
.av-parallax {
height: 100% !important;
}
}…with just this, adding in my own background image reference?
.avia_mobile .av-parallax {
background-image: url(http://acme.com/wp-content/uploads/2014/07/parallaxbackgroundimage.jpg)!important;
height: 100% !important;
}Hm, no you’d still need to set the background image to the “hero-bg-mobile” otherwise it will affect all section throughout the page.
.avia_mobile #hero-bg-mobile .av-parallax { background-image: url(https://acme.com/wp-content/uploads/2014/07/parallaxbackgroundimage.jpg)!important; height: 100% !important; }Best regards,
JosueYup, you are right. When I tested the new CSS code without #hero-bg-mobile all the parallax background images ended up being the same image as the first color section one.
So the final modified CSS code you provided works perfectly. Thanks!
.avia_mobile #hero-bg-mobile .av-parallax {
background-image: url(http://acme.com/wp-content/uploads/2014/07/parallaxbackgroundimage.jpg)!important;
height: 100% !important;
}
- You must be logged in to reply to this topic.