Elite theme: iPad and iPhone not serving out mobile version of hero image

[Erik Smelser]

Good afternoon:

Thanks for your help the other day on setting the breakpoints for when the mobile image takes over for the default featured image. I used the following:

@media only screen and (max-width : 1024px) {

Foolishly, I used Screenfly to test the differnt screen sizes and was delilghted to see that everything was firing as I desired. The problem is that in “real world” iPhone and iPads, the site is not working correctly.

I’ve confirmed that image substitution is working: on the desktop version, I get the desired image of the house. On the iPad version, I’m served an image of a cat (as I said, I was making SURE the image substitution was happening.)

Here’s where things go wrong: The image of the cat is 320 x 480 (iphone 3/4 size). When I look at that image on an iPad or iPhone, it’s blown way up and blows out the rest of the home page sections.

Could this be an iPhone / iPad viewport issue?

Lastly, from an earlier support thread, your customer mentioned that domain forwarding / masking may be the culprit. See below:

Thanks Bill,

That gets me pointed in the right direction. Through my godaddy account, I forewarded the domain http://www.musicbycaroline.com to http://musicbycaroline.centurisolutions.net with masking! That might be where the problem is happening. Thank you again for your help and have a blessed weekend!

Olie

If forwarding and masking turn out to be the culprit, then I’d be amazed. But before pursuing that avenue, I need to resolve anything pertaining to coding.

What do you think?

Erik

[Bill Robbins]

Hey Erik,

Great question there. You could always visit the original domain directly via your mobile device and see how it works there. I would imagine that would let you know if the frame is throwing things off with the mobile.

Let me know how it goes,
Bill

[Author]

Posts