Image Issues on Mobile Sizes

[ajonesx]

Hi Xters,

I’m using XTheme 5.25 and am having some issues with my header and hero images which respond correctly when resized to mobile on my desktop computer… but fail on an actual iPhone 7-plus.

http://www.labeachcitieshomes.com/xtheme/

Using my homepage as an example:

Surf & Sand Header Image - becomes hyper-zoomed in and very blurry on actual iPhone on homepage (and some other pages too,) but responds correctly and looks fine on other mobile pages (see Home > Big Beach Cities Map.) It may be worth noting that the header image also serves as the mobile menu BG only on mobile sizes.

Open Beach Hero Image on Homepage w/ Parallax FX - Hero image seems to resize correctly to allow for parallax on desktop when resized to mobile, but seems locked in place with no parallax effect on actual iPhone 7-plus. This also seems to be the case with the only other page I’ve built so far with a hero image: Communities > Venice Beach.

Thanks for your help.

[rad]

Hi there,

Thanks for writing in.

Parallax is inactive for mobile for performance purposes. And it’s only normal for the image to get zoomed when viewed on the mobile device since it’s taller (the height stretch). Though, I like to see what you’re getting right now, I could be wrong as I can’t reproduce this issue.

Thanks!

[ajonesx]

Hi,
Thanks for clarifying the parallax issue in regard to the hero image (however the parallax does work below when resized to ‘mobile’ in cornerstone on a desktop computer regardless of image resizing.)

In regard to the header image issue which was not addressed…

Here are some photos of the header image as the mobile menu BG on an iPhone 7-plus… same global parameters on all three examples from different mobile pages, but correct on one, much closer on the second, and completely zoomed in and blurred on the third (all instances are immediately after the main menu tab is opened prior to any expansion from opening sub-menus?)

These are only examples… many pages seem to zoom in to the header image at many different sizes while only a few pages display correctly (fully zoomed out.) Also, the menus all display uniformly and correctly when resized to ‘mobile’ in cornerstone on a desktop computer.

It may also be worth noting that the ‘correct’ header image version in the iPhone photos is also zoomed in to an extent… here is how the mobile menu 'properly displays in cornerstone.

[rad]

Hi there,

It’s because it’s still in desktop, the only thing change in that view is screen size but there are no touch features, and mobile devices are detected through touch features when it comes to javascript and when loaded in the actual mobile device. And also, there is no performance issue when it comes to desktop’s mobile device preview mode.

Please also note that actual devices have features and DPI that a test preview doesn’t have so it may look different on many areas. Your actual device is also small compared to browser preview mode, hence, everything looks bigger. Have you tried comparing it in a device with equal dimension as browser preview?

Thanks!

[ajonesx]

Sorry Guys… but I’ve found these answers semi-incomprehensible in terms of a solution. The first answer given yesterday didn’t address the variable mobile menu resolutions on actual iPhones at all (which is the only problem that really concerns me) and the second answer today keeps referring to ‘it’ and I have no idea what ‘it’ is. The header image, the hero image, something else?

I’ve been very clear about the issues here and included photos… the repeated references in today’s answer about what’s seen on the desktop in cornerstone don’t seem relevant because the question is about how the mobile menu is displaying in the real world (i.e. in a way that’s not consistent or usable… please see the middle set of three actual iPhone screen photos that show how the mobile menu is hyper zoomed-in and blurry for most of the pages on my website.)

Maybe someone else there can take a shot at it?

[ruenel]

Hey There,

We apologize for the confusion. I would suggest that you edit your custom css for the mobile menu background image. You can make use of this code instead:

@media (max-width: 979px){
  .masthead.masthead-stacked {
    background: url(http://www.labeachcitieshomes.com/xtheme/wp-content/uploads/2018/02/close-up-70911-7pctBRT-SM-flat.jpg);
    background-attachment: fixed !important;
    background-position: top center !important;
    background-size: 100% auto !important;
    background-repeat: no-repeat !important;
  }
}

This is code is similar to your shorthand css. The advantage of this is that you can easily tweak the background size and other properties.

The !important is also needed to force the property because your above css block if already forcing the property to take effect.

Hope this helps.

[ajonesx]

Hi Xters,

Tried the attached code which helped some, but it created new issues with how the mobile menu displayed so I fiddled with it a bit by modifying and removing different elements. Though interesting and informative (I’ve never written CSS before using XTheme) this didn’t work either lol!

However, I then tried removing the ’ fixed center top 50%;’ qualifier from my original max width 979px masthead code and every thing seems to be working well (i.e. consistently/uniformly.)

I also preserved the code you sent for future reference in regard to other possible issues… my game plan is to delete all the hidden code in my CSS when the site is completed.

One final question… is it in fact the case that parallax EFX don’t work on iPhones (and possibly other mobile devices?) They sure look nice in the cornerstone previews at mobile resolutions for both the header image in the expanded mobile menu and on the hero image backgrounds on the pages themselves… though neither seem to work on my iPhone 7-plus (i.e. BG images and overlying text/photos/menu are static and locked to each other… I can provide more photos if needed.)

Thanks again for your help…

[rad]

Hi there,

Yes, parallax is disabled on all types of mobile device, anything that has touch feature. It works on cornerstone preview and browser device preview since they are still on desktop where touch features aren’t present.

Glad it’s all working now.

Thanks!