Issue with Enfold one-page restaurant demo on mobile - Support

Tagged: enfold, layout, mobile, one page

Viewing 30 posts - 1 through 30 (of 44 total)

1 2 →

Author

Posts
January 28, 2016 at 11:04 am #573609

Davide
Participant

Hi guys,
I noticed that if I try to view this demo http://kriesi.at/themes/enfold-restaurant-one-page/ on my Windows Phone (Lumia 930) using Internet Explorer, I get 2 TOTALLY different layouts depending on the view preferences on the browser’s settings:

1) As “desktop” on windows phone 8.1:

https://www.dropbox.com/s/tn50umf79fk9ta1/enfold_mobile1.jpg?dl=0
> This one looks great and it is just like other mobile devices show it (I tried on iPhone and Samsung);

2) As “mobile” on windows phone 8.1:

https://www.dropbox.com/s/mqbpuoztmyqozty/enfold_mobile2.jpg?dl=0
> This one as you can see looks totally wrong. It doesn’t show the slider on top, it just shows a fixed background photo (scrolling up or down the whole page that image stays there, stuck), photo that I can’t even find in my WordPress media library (I downloaded the one-page demo to give it a try), and the text has no background therefore it is completely unreadable.

Since, as I see, Android e iOS show the page in the same way as Windows Phone does when the browser is set to work “as desktop”, it seems not to be a big problem, but I wonder why the page looks so bad when I set the browser “as mobile”.

Any idea on how to fix that?

Thank you in advance (excuse my English) :)

Davide

January 29, 2016 at 5:05 am #574309

Rikard
Keymaster

Hey Davide,

As of now the theme doesn’t support Windows Phone unfortunately.

Thanks,
Rikard

January 30, 2016 at 3:30 pm #575015
M1000000
Participant
Just chiming in as I’m in the same boat and was surprised to say the least that Enfold fails on Windows Phone (which has more than a 20% business user market share here in the UK – so it’s hard to ignore).

The only issue I am currently aware of is this background bug – when a color section background image is set to fixed or parallax it fills the viewport on mobile IE and other content sections scroll over it (ignoring their own background settings).

The issue does not occur when the background is set to scroll – so not using fixed or parallax backgrounds on your site is one option but is far from ideal as it degrades the desktop experience for all to accommodate 20% of mobile users. Setting mobile IE to desktop mode also solves the problem as you point out but we can’t / shouldn’t expect users to have to change browser settings to use a site in 2016.

My first attempts to resolve this using a general media query to force fixed and parallax backgrounds to scroll below a breakpoint were unsuccessful so I have now engaged a developer at my own cost who is looking into it.

Maybe browser sniffing the user-agent for windows phones with javascript explicitly to assign a ‘winphone’ class to the html tag and then reference it in the css to create a fallback will get us a bit further – but with no information or support (Enfold’s otherwise excellent support team seem to have been told to ignore the issue and will not respond to any requests for information) we are fishing in the dark.

Will happily share any resolution here if we find one.
- This reply was modified 8 years, 9 months ago by M1000000.
February 2, 2016 at 4:19 pm #576526

Vinay
Inactive Moderator

Hi!

IE mobile browsers do not render the same way as IE on desktop. Enfold is running on many site’s without any issue on IE as well but the issue you are pointing out need to be checked as this is the first i am coming across.

I did check the site on my samsung on desktop view and regular on IE and everything looks fine and runs smooth.

There are several possible reasons why only you are facing this issue since every site uses different settings and different plugins. If you like to trouble shoot we are here to help you :)

Please deactivate all plugins and make sure you are using the latest version of the theme and check the site again and let us know. Please make sure to clear the browser cache while check for the issue.

@M1000000 Please open a new ticket so we can help you without getting the issues mixed up.

Best regards,
Vinay

February 2, 2016 at 4:27 pm #576531

M1000000
Participant

Hi Vinay, I have had a thread open for 3 weeks here: https://kriesi.at/support/topic/windows-phone-support-update/#post-567810. Being ignored.

The issue has been known for a long time (search Windows Phone on this forum).

Thanks, M

February 2, 2016 at 4:30 pm #576534

Davide
Participant

Hey Vinay,
thank you for your reply… the issue is actually the same as M1000000’s one (btw thank you M1000000, your reply was great!) :)

Cheers,

Davide

February 2, 2016 at 4:31 pm #576535

M1000000
Participant

Welcome Davide – glad it helped. And hoping the Enfold boys manage to come up with something soon. M

February 3, 2016 at 7:20 am #576915

Rikard
Keymaster

Hi,

I’m not sure what to tell you other than that we are aware of this, finally it’s up to Kriesi to decide if he want’s to make the effort to support Windows Mobile or not.

Regards,
Rikard

February 4, 2016 at 3:57 pm #577811

M1000000
Participant

Hi Rikard,

I think there are two points here – one is providing full support for Win Phone and the other is providing a fix for the issue above.

The first would be great. But I understand that supporting all browsers on all devices is an impossible goal, supporting microsoft browsers has always been a pain and that a long term commitment to Windows Phone would require resourcing. However, the fact is that despite its circa 3% penetration of the global consumer market it does have a significant share of others (7% consumer in European countries / 25% in UK business) and it is generally perceived as one of the big three – so without support for it I cannot honestly tell clients that sites we build on Enfold are mobile friendly. Something that should probably be made clear on sales materials if the number of people, like me, finding out the hard way is anything to go by.

The second would be perfectly acceptable to me at this point. This pesky background issue is the only one I am aware of that makes the site unusable on Windows Phones and the only one I have received customer complaints about.

In any event it would be useful to let us know whether this is actually being actively investigated and whether a fix for the background issue is likely or possible even if full WP support is not.

In the meantime I continue to invest time and resource in an attempt to work out why it seems the background setting applied in the page editor cannot be over-ridden with css on winphone when it can on iOS/Android and any ideas you might provide to give us something to focus on would be most welcome.

All the best, M

February 17, 2016 at 9:58 am #584544

wizard247
Participant

Wow! I wish I had read this sooner or that you had somehow placed a warning on your ThemeForest page that it is incompatible with Windows phones. I have just finished redesigning a web site for my clients’ business – http://web52.sand.studiocoast.com.au/ – only to have them ring me as soon as I sent them the link that it looked “crap” on their phones – they both have Windows phones.

Do I now have to redesign my site in a different theme?

The issue is not just parallax or fixed backgrounds but also with LayerSlider. What a mess!

Is there any possibility of a fix for this through some css?

And Rikard is saying “As of now the theme doesn’t support Windows Phone unfortunately.” That was posted on 29 January 2016. So this issue has only recently arisen? Can we go back to a previous version that WAS compatible?

What are my options here?

Would appreciate a response.

Wizard247

February 17, 2016 at 12:49 pm #584650

M1000000
Participant

Hi Wizard247 – have responded on the thread I started here: https://kriesi.at/support/topic/windows-phone-support-update/#post-584647.

February 19, 2016 at 8:26 am #585906
Ismael
Moderator
Hey!

Thank you for your thoughts and we are very sorry for the inconvenience that this issue may have brought you. We might not be able to provide full support for windows phone but we’ll try to fix major issues such as the parallax background. We created a custom script that will remove the parallax container and then apply the background in the actual color section container. Please add the following code in the functions.php file:
```
// windows phone background fix
add_action('wp_footer', 'ava_windows_fix');
function ava_windows_fix(){
?>
<script type="text/javascript">
(function($) {
    function a() {
		var ua 	     = navigator.userAgent,
	    	ie 	 	 = new RegExp("IEMobile"),
	        isMobile = ie.test(ua);

        if(isMobile && $('.avia-section .av-parallax').length >= 1) {
            $('.avia-section').each(function() {
                var section  = $(this),
                    parallax = section.find('.av-parallax-inner'),
                    pbg      = $(parallax).attr('style').split(';'),
                    bg       = ''.
                    bgurl    = '';

                if($(parallax).length != 1) return;

                $(pbg).each(function(key, value) {
                    if(value.indexOf('background-image') != -1) {
                        bg = value;
                    }
                });

                bgurl = bg.split(' ');

                $(bgurl).each(function(key, value) {
                    if(value.indexOf('url') != -1) {
                        bgurl = value;
                    }
                });

                $(this).find('.av-parallax').remove();
                $(this).removeAttr('style');
                $(this).css({
                    "background-image" : bgurl,
                    "background-attachment" : "scroll",
                    "background-position" : "center center"
                });
            });
        }
    }

    a();
})(jQuery);
</script>
<?php
}
```
Remove browser cache or hard refresh the page. Let us know if helps.

Cheers!
Ismael
February 19, 2016 at 12:07 pm #585967

Davide
Participant

Hi Ismail,
thank you, I appreciate your the effort, but nothing seems to have changed.
The layout still looks great if my phone browser is set to desktop mode – in this case, as it was before, everything is fine – but it definitely doesn’t with the phone browser set to mobile mode: the slider on top doesn’t work, it just shows the last slide’s image, fixed, and when scrolling down the page the whole content flies over that fixed image making it very, very hard to read…

thanks again

Davide

February 19, 2016 at 1:29 pm #586030

M1000000
Participant

Hi Ismael,

Thanks for this – real progress at last. Before I implement could you please confirm whether this fix applies to parallax and fixed backgrounds (as the issue affects both).

Many Thanks, M

February 19, 2016 at 3:09 pm #586086

M1000000
Participant

OK implemented and tested on Browserstack (caches cleared etc) – same as Davide I’m afraid – not fixed no noticeable difference.

Ismael – what did you test this on?

February 20, 2016 at 6:00 am #586390

Ismael
Moderator

Hi!

I used the google chrome’s emulator, device was set to Nokia Lumia 520. I’m not sure why it’s not working on your end but it’s probably the browser detection line. We added a little modification to the code above. Please test it again.

Regards,
Ismael

February 20, 2016 at 5:16 pm #586489

M1000000
Participant

Hi Ismael,

Still not working for me I’m afraid. I’m testing on browserstack – have tried Lumia 520 / 630 / 925 / 930.

I can’t speak for Chrome emulation but I found that Win Phone emulator in IE does not show the issue (and therefore useless for troubleshooting) while browserstack and real device do.

Can I just check that you were able to reproduce the issue on Chrome emulator before using this fix?

Thanks. .

February 21, 2016 at 6:15 am #586579
Ismael
Moderator
Hi!

I can’t reproduce the issue on the emulator but I know that the parallax container which contains the background covers the whole screen. What if you remove the whole mobile browser detection? Remove this line:
```
isMobile && 
```
Make sure that all cache plugins are disabled or purge all cache before checking.

Regards,
Ismael
February 21, 2016 at 8:12 pm #586737

M1000000
Participant

Hi Ismael,

Before I go through the testing cycle again can I just clarify this – you are aware that this issue is not limited to parallax backgrounds and effects fixed backgrounds too right?

M

February 23, 2016 at 2:02 am #587519

M1000000
Participant

Gave it a go while waiting – no change.

February 23, 2016 at 5:41 am #587553
Ismael
Moderator
Hi!

@M1000000: Yes, I’m aware of the “fixed” background issue but let’s take this one step at a time. Could you please provide a link to the page with the issue? Try to set the color sections to parallax instead of fixed then test the site again. If it doesn’t work, please try to replace the code with this:
```
// windows phone background fix
add_action('wp_footer', 'ava_custom_script_windows');
function ava_custom_script_windows(){
?>
<script type="text/javascript">
(function($) {
    function a() {
		var ua 	     = navigator.userAgent,
	    	ie 	 	 = new RegExp("IEMobile"),
	        isMobile = ie.test(ua);

			console.log(isMobile);

        if(isMobile) {
            $('.avia-section').find('.av-parallax').remove();
		}
    }

    a();
})(jQuery);
</script>
<?php
}
```
This will just remove the parallax containers without applying background back. If it doesn’t work then there’s something wrong with the browser detection.

@Davide: I know that you referenced the demo site but we would like to see one of your page with the issue. Please post it here.

Best regards,
Ismael
February 23, 2016 at 3:35 pm #587743

M1000000
Participant

Hi Ismael,

OK I have set up a test site for you – admin and FTP credentials below.

Clean WordPress / Enfold install with child theme. 1 page with parallax background color section and one with fixed.

The code above is in the child theme functions.php.

Can confirm this IS working on parallax background – background image being removed and not replaced as expected.

Hope this helps, M

February 24, 2016 at 5:10 am #588116

Ismael
Moderator

Hi!

Thank you for the info. That’s a bit of a good news. We updated the code in the child theme’s functions.php file. If possible, test it on a page without the fixed background, only parallax. I hope it works.

Best regards,
Ismael

February 24, 2016 at 11:35 am #588294

M1000000
Participant

Success on the parallax background – can hardly believe my eyes after so long on this! Congrats!

February 24, 2016 at 12:31 pm #588316

Davide
Participant

HI Ismael,
sorry I just read now your reply from yesterday and tried your new fix: that works pretty well!
Thank you very, very much and thank you M1000000 for your great support :)

Davide

February 25, 2016 at 5:51 am #588754

Ismael
Moderator

Hi!

That’s great! About the “fixed” option, is it OK if you use the parallax background for those sections? The two attachment options almost have the same effect. If not, we’ll try to create a workaround for that as well. Thank you for your patience.

Cheers!
Ismael

February 25, 2016 at 11:51 am #588944
M1000000
Participant
Without being an ongoing thorn in your side (and having put quite a bit of time into this myself) I would say that, as we’re so close, a solution for fixed backgrounds would be good too. Once a project is handed off to clients (and mine could have multiple editors involved) it’s going to be difficult to ensure that they never apply a fixed background and the first we’ll know of it is a visitor complaining that the site is broken on their Win Phone.
- This reply was modified 8 years, 9 months ago by M1000000.
February 26, 2016 at 7:39 am #589577
Ismael
Moderator
Hey!

Fair enough. The easiest workaround I can think of is to set the background-attachment to scroll on windows mobile view. Please try this:
```
// windows phone fixed background fix
add_action('wp_footer', 'ava_custom_script_bgfixed');
function ava_custom_script_bgfixed(){
?>
<script type="text/javascript">
(function($) {
    function b() {
		var ua 	     = navigator.userAgent,
	    	ie 	 	 = new RegExp("IEMobile"),
	        isMobile = ie.test(ua);

                if(isMobile) {
                      $('.avia-bg-style-fixed').css('background-attachment', '');
                      $('.avia-bg-style-fixed').css('background-attachment', 'scroll');
		}
    }

    b();
})(jQuery);
</script>
<?php
}
```
If you don’t mind removing the fixed background effect, this code ought to do the job.

Best regards,
Ismael
March 1, 2016 at 11:21 am #591458

M1000000
Participant

Hi Ismael – sorry for the delay. Will test this today.

March 1, 2016 at 3:01 pm #591570

Yigit
Keymaster

Hi!

Please do so and let us know.

Regards,
Yigit
Author

Posts