Header Issue on iPad - Support | Kriesi.at

Viewing 17 posts - 1 through 17 (of 17 total)

Author

Posts
December 13, 2014 at 9:27 pm #367773

djshortkut
Participant

When I rotate my iPad from landscape to portrait and then back to landscape the header loses alignment (see attached image) I’m not sure why this is happening. All of the Quick CSS I have entered I got from support so not sure if any of that is causing it. Please let me know how to fix. Thank you!

December 15, 2014 at 4:28 am #368124

Andy
Inactive Moderator

Hi djshortkut!

do you mean that at first it looks fine on landscape mode? only when you switch to portrait and back to landscape then it breaks the layout? That’s weird and on the emulator it does not happen. I can’t reproduce the issue as I don’t have an iPad.
Let’s wait for someone who has.

In the meanwhile, could you please try to deactivate all plugins to see if one is causing is issue?
Also admin access would be nice.

Cheers!
Andy

December 15, 2014 at 7:13 am #368172

djshortkut
Participant

This reply has been marked as private.

December 16, 2014 at 9:25 pm #369168

Yigit
Keymaster

Hi!

I unfortunately do not have a chance to check your website on an actual ipad but i checked your website on my iphone and ipadpeek.com but i cannot reproduce the issue. If it is possible for you, can you please check your website on another ipad?

Regards,
Yigit

December 16, 2014 at 10:54 pm #369213

djshortkut
Participant

Thanks Yigit. I have tried it on another iPad and it does the same thing. It does not do this on the iPhone for some reason (I think because the mobile menu is activated on portrait and landscape)

Another thing I noticed is that this only happens on the homepage of my site. When I open the site in landscape mode it looks fine, then when I rotate it to portrait mode everything is still working, finally when I rotate it back to landscape the header shift over to the left and the menu bar overlaps the logo (like the dropbox image I sent) I did notice that when the fullscreen slider is adjusting to go fullscreen when I rotate the iPad back to portrait mode it happens right after this. I would imagine this is related to some quick css support has provided me because it was working fine not too long ago. All of the quick css I have input is from support so I haven’t added anything myself.

I checked it on ipadpeek as well but it doesn’t reproduce the issue there either. It has to do with rotating the iPad I believe. I tried disabling all of the plugins and that didn’t help and I have also flushed the cache on all devices and that doesn’t fix the problem either.

Thanks!

December 19, 2014 at 1:42 am #370363

Yigit
Keymaster

Hey!

I asked Josue to check your website on his tablet. Please kindly wait to hear from him.

Cheers!
Yigit

December 19, 2014 at 1:48 am #370366

djshortkut
Participant

Ok, thank you!

One more thing I noticed is that when this header issue happens, if I scroll down the page on my iPad the header readjusts itself correctly. It’s almost like when it is rotated, the header doesn’t adjust back correctly.

December 19, 2014 at 2:50 am #370408
Josue
Inactive Moderator
Hi,

Try adding this at the very end of your theme / child theme functions.php file:
```
function add_custom_script(){
?>
<script>
(function($){
    $(window).resize(function() {
    	$(this).scroll();
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');
```
Regards,
Josue
December 19, 2014 at 4:52 am #370436

djshortkut
Participant

Thanks Josue! I added this at the end of my child theme functions.php file but the problem still persists. Am I missing something? Should I add this to the end of the main theme functions.php file as well?

I hope you are able to see the issue on your tablet. As mentioned, once I rotate the iPad back to landscape mode the header loses alignment and shifts over to the left overlapping the logo. It’s only the menu items and custom text in the upper right that move over. After this happens I can either scroll down the page and it will fix itself or refresh the page to fix it but then it happens again the next time I rotate the device.

I did notice that if I rotate the iPad to portrait mode and then rotate it back to landscape (without giving the fullscreen slider time to fully adjust fullscreen) it doesn’t have this issue. It’s only when I rotate it and wait for the fullscreen slider to adjust fullscreen and then rotate it back to landscape mode. Not sure what is causing this as everything was working perfectly until recently. I’ve tried deactivating all plugins, removing the Quick CSS, and re-updating a fresh copy of Enfold Version 3.0.4 via FTP and I’m still having the problem.

December 28, 2014 at 9:15 pm #372489

Kriesi
Keymaster

Hi!

I can reproduce the issue on my ipad but since it only happens on your installation and does not happen on mine, no matter the settings I use I, I would think it has something to do with a plugin or some css customizations.

Since you have already tried deactivating and removing all plugins and additions would you mind sending us your login credentials as a private reply so we can take a look at your backend? I cant promise that there is an easy fix but we can try to investigate the issue and see if there is anything we can do to fix this…

Best regards,
Kriesi

December 31, 2014 at 2:30 am #373389

djshortkut
Participant

This reply has been marked as private.

January 5, 2015 at 12:28 am #374827

Josue
Inactive Moderator

Hi,

I was able to test your site on an iPad 4 running iOS 7.1.2 and the header responded as expected on orientation change, there was some delay but i believe that’s expected. On which version of iOS are you experimenting this issue?

Regards,
Josue

January 5, 2015 at 5:01 am #374947

djshortkut
Participant

This reply has been marked as private.

January 16, 2015 at 7:57 am #380611

Kriesi
Keymaster

Hi!

I am afraid i am at a loss here. I tried pretty much everything from removing the css to deactivating plugins but the results are the same. Cant really tell why this is happening. Did you make any customizations via child theme file replacement? Thats the last thing I could think off, otherwise I have no idea why your installation is behaving that way and ours isnt…

Best regards,
Kriesi

January 20, 2015 at 10:49 pm #382764

djshortkut
Participant

Thanks for all of your help with this issue Kriesi!

I did have a couple of files that I had added to my child theme so I updated them with the most recent files from versions 3.0.5 but the issue is still happening. It doesn’t seem to happen as often but is still happening none the less.

One more thing that I noticed that might help in trouble shooting. When I turn the iPad from portrait back to landscape mode, I noticed that when the slider is trying to adjust to the screen size the entire screen shifts about 1/4 of the way to the left and you can see the grey background behind the theme and it snaps back and that is when the menu is off. Not sure why it is doing this though.

January 21, 2015 at 1:14 am #382803

Kriesi
Keymaster

Yes I noticed that too. At this point I am afraid we will need to wait for others with a similar issue to gather more information. If I happen to find out whats causing the issue I will post here…

February 28, 2015 at 7:28 am #403801

djshortkut
Participant

I actually figured out what was causing this issue. It was the file size of the images. Since I had larger file sizes (a couple of MB each) the slider was having difficulty resizing and that’s what was causing the issue. Once I reduced the file size of the images, the issue went away. Thanks for all of the help with this! You can close this thread.
Author

Posts

Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘Header Issue on iPad’ is closed to new replies.