Viewport Relative Header Image

Hi,
thanks so much for a great theme!
But I’m having a massive problem with the header image, and the other parallax images but to a lesser extent. I noticed the same problem on my iOS devices with the demo moesia website.
I noticed in another forum that you were working on a fix? Just wondering if you managed to figure out a fix yet?
Thank you so much!

Kind regards,
amanda

Hello Amanda,

Yes, the issue has been solved for a couple of days now. We switched to jQuery sizing because of iOS being unable to handle viewport relative units. You can download the new version here.

Would love to see how you’re using Moesia on your site, if you’re ok with sharing the link.

Regards,
Vlad

Hi Vlad,
thanks heaps for your quick reply, and for the update!
But even with the update, all my parallax images still aren’t displaying right on iOS. Same thing with the demo site. That’s a real pity, cos so many people use iPhones and iPads.
You can view the site here.
Are you planning another fix/update?
I would be grateful for responsive images if we can’t get parallax.
Thank you!

Kind regards,
Amanda

Wait a minute. Is the header image alright now? And the issue remains with the background images for your sections? Can’t really test it now cause I don’t have an iPhone. When I made the update I checked on somebody elses phone and it seemed fine.

I think for the moment the best solution would be to disable the parallax effect for lower resolutions. Please add the following code to the bottom of your style.css and let me know how it goes:


@media screen and (max-width: 1024px) {
	section {
		background-attachment: initial !important;
	}
}

Regarding the header image, it is an improvement over the previous version.
Without the update, the image was very large and the image pixels blew out of proportion. It wasn’t caused by the overlay (I switched that off and the image was still huge). So you would have to scroll very-very-very far down to see the rest of the page. Now at least it the sizing is more what you would expect and the rest of the page is visible.
With the updated theme, the header image works better on your site then it does on my site. See image below from an iPhone 5.

demo site my site

I don’t know why mine isn’t showing up as nicely. :frowning:

I used screenfly to try to get an idea of what it could look like:
your screen shot from screenfly my screen shot from screenfly

The other images now work well by adding your code to style.css
Thank you!

You can download the latest version of the theme here: http://www.filedropper.com/moesia

This is as good as it can get :slight_smile: Basically, the part of the image that you’ll see when you resize your browser down to iPhone width should look the same as on your iPhone.

Thank you for your feedback!

Version 1.02 works so much better! :slight_smile: Thanks heaps for doing that!