-
Posts
-
Hello. We are developing a site based on the Enfold Church Demo, and are having a strange issue on mobile devices, where the background image in the lead Color Section on many pages is rendered overlapping with the following content (and is larger than normal also). The site renders fine on desktop using normal responsive layout.
We have tried disabling all custom CSS, deactivating all plug-ins, disabling all custom code in our functions.php etc., but nothing has altered this behavior. Even after debugging in Chrome we are not sure what is causing the issue.
Here is an example of the desktop (desired) rendering:
And here is what it looks like on a phone:
As you can see, the image is zoomed and also occludes the main content following it. It also looks like we are getting different markup depending on the device profile.
We are trying to launch the site this month (January 2019) so any help or advice is greatly appreciated. Thank you in advance.
Hey Gary,
Thanks for the screenshots, though I couldn’t see that happening on the page you linked to. Which page are the screenshots from?
Best regards,
Rikardby the way: if you do not want to publish the link of your website, I advise you to make the links in the screenshot unrecognizable ;)
Nevertheless the link was a better source to help you: you have the colorsection above with parallax effect – but the following not!
On mobile there are strange behavior – because the following color-section got the same attribut. That might be a bug indeedclick to enlarge
but f.e. your about page does not have parallax handling for the first color-section background-image. But even here the color-section 2 got that parallax things ???
maybe that function in shortcodes.js :
$.fn.avia_mobile_fixed = function(options)
is responsible for that – because on your about page the image in color-section 1 is fixed.Thank you for taking a look Guenni007. I should have mentioned that adjusting the display attribute for the Color Section background image was the first thing I tried during my troubleshooting. It did not seem to have any affect on the mobile behavior though. I had not undone the changes I had made for testing, so thanks for pointing that out.
Well the other thing is – i can not reproduce that behavior – either on an older nor on the newest Enfold.
So it must be some custom settings that goes to that styling.Thanks for the screenshots, though I couldn’t see that happening on the page you linked to. Which page are the screenshots from?
Thank you Rikard. It’s happening on all of the static pages where there is a two-column section layout following the lead color section image. So you can see it on our top level About, Venue, and Sponsors pages for example.
The Enfold theme Church demo applies a -60px top margin adjustment to the row settings of these columns, which offsets the content into the “featured” image. If you carefully watch at the rendering on a mobile device after deleting the cache, you may see there is an brief instant where the “normal” image appears (and seems to follow the markup), but immediately the “zoomed-in” image appears and overlaps with the content following. (Edit: although this may be an artifact of local browser caching.) Adjusting the z-index, margins, or other property while debugging doesn’t seem to help.
We currently do not have an iPhone handy to check out Safari, but we are seeing this behavior on our Android devices running Chrome and Edge (Blink). We are also observing this on the desktop in Chrome and Edge (EdgeHTML) using device emulation while debugging (as shown in my screenshots). (For Chrome, it is necessary to refresh the page after switching the device profile to see the problem appear.)
Looking at the markup I highlighted, it appears that the mobile device is receiving an alternate version? Is that something the theme is doing, or could it be a plug-in?
Thanks again for offering to help.
Gary
Well the other thing is – i can not reproduce that behavior – either on an older nor on the newest Enfold.
So it must be some custom settings that goes to that styling.So it would seem. I also cannot reproduce it on the public Church demo here: https://kriesi.at/themes/enfold-church/
However, before posting this, I tried disabling every customization we have made without success. For my own sanity, I will spend some time this morning disabling everything again and report back.
Gary
For my own sanity, I will spend some time this morning disabling everything again and report back.
So, I have temporarily deleted everything from my child theme’s style.css and functions.php files. I also have disabled every plug-in except Classic Editor and the Events Calendar. Finally, I disabled caching in WP Super Cache (installed by my hosting provider). The behavior persists :-(
I will leave the site like this for the time being…
Gary
So, one additional data point: neither the News or Contact pages on my site is showing the issue, despite having near identical layouts and elements. I have inspected the markup and can’t really find anything obvious that would cause this. In case this helps.
Hello again. After a bit of additional investigation, I have traced the problem to a corrupted Color Section element that had gotten copied into a template. While the element itself looks fine in the Advanced Layout Builder (all settings are correct and as-desired), somehow the presence of this particular element on the page was triggering the behavior. After I replaced it, the problem disappeared.
It’s still not clear to me how or what specifically caused the issue or how the element became corrupted. In any case, I at least can get the train moving again.
Thank you for your help. I think we can mark this as closed for now.
Gary
Hi Gary,
Great, glad you got it working and thanks for the update. I’ll close this thread for now then, please open a new thread if you should have any further questions or problems.
Thanks @guenni007 for helping out :-)
Best regards,
Rikard
- The topic ‘Weird formatting issue but only on mobile devices’ is closed to new replies.