[Jubo]

Hey, I just created a site with Parallax Frame and it looks really good – everywhere except on retina iPads in landscape format.
Desktop view:

iPad header:

iPad body:

I’ve been messing around with all the screen size settings I could find in the style.css file, but I can’t figure out what part of it the iPad is using.
Can anyone help me, please? I really don’t want to have to configure a different theme because of this.

[Jubo]

Seems like img isn’t working. How about links?
desktop view
iPad header
iPad body

[tikaram]

@jubo : Please post in your site URL.

Regards,
Tikaram

[Jubo]

oh, right, sorry: site URL
thank you for looking into it!

[tikaram]

@jubo : I don’t seem to find any issue on your site. Can you please specify the model of the device that you are using. Let me know if you have any further issues.

Regards,
Tikaram

[Jubo]

It’s two different devices: an ipad 4 and an ipad pro 9,6″…
I’ve also tried out different window sizes with chrome and firefox, and I’ve noticed that between the 1200-something and 1100-something (sorry, I’m on the phone and can’t look up the code right now) – breaking point, it breaks up the navbar and search icon into 3 rows.
I can sort of force fix that with some unelegant custom css if I have to, but what I really can’t figure out is why the header picture gets blown up to like 500% on both ipads. They seem to be using the 1100-something screensize, but this doesn’t happen on any desktop browser I’ve tried, and changing the header image size in the style.css doesn’t affect it at all. Any ideas where it might come from?

…and more importantly how to fix it. I can sort of figure out html and css a bit, but everything else is just way beyond me. XD

[Jubo]

Okay, so I’ve fixed the navbar (the translation plugin was causing the problem), and I found out the iPad is using the screen size it’s supposed to – 1100px (iPad Landscape).
Now I’ve tried adding #header-featured-image and changing its properties… I CAN hide the header image, for example – but nothing I do is having an effect on the size of the image. In any desktop browser it looks perfectly fine, only the iPads are scaling it to about 500% in Safari, Firefox and Chrome.

[tikaram]

@jubo : Please try deactivating all plugins and follow this link to know more about plugin conflict with our themes.
Please try clearing cache as well after deactivating plugins. Let me know if the problem still persist.

Regards,
Tikaram

[Jubo]

Even with all plugins deactivated, cache cleared and in private mode the problem is still there. Everything’s fine except header and footer pictures are scaled way up.
I tried a few other themes, they were working fine. After changing back to Parallax Frame the issue was back.
I also downloaded a fresh version of Parallax Frame and tried it without customization – no luck. the issue seems to be with the theme, nothing else. As far as I can tell anyway…

Thanks for all the help, I’ll just start over with another theme I guess. 🙁

[tikaram]

@jubo : Go to Appearance => Customize => Additional css and add the following css. The css is intended for iPad.

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
	.parallax-effect {
		background-attachment: scroll;
	}
}

Let me know if this makes any difference.

Regards,
Tikaram

[Jubo]

WOOOOO! That did it!

Thank you so much, you’re awesome! *big hug*

[tikaram]

Hello, there,
I hope I was able to resolve your issue. If it’s not too much trouble, I have a quick request: could you please leave an honest review?
https://wordpress.org/support/theme/parallax-frame/reviews/#new-post
Your review will help others know what to expect when they’re looking for the support I offer. Even a sentence or two would be hugely appreciated.
Thanks, and if there’s anything else at all that I can do to help, don’t hesitate to let me know.

Regards,
Tikaram

[Author]

Posts