Sections with fixed background image do not work on ipad, iphone

It looks fine from here when I resize it.
Maybe look into compression of the picture.
Try using cache to see if it speeds up.
Sometimes if you have too many pictures on the page then it can slow it down.

Thanks, thomas. Did you try it on both an ipad and an iphone? I’ll try your suggestions to see what happens.

Hi. On my iPad Pro the page looks weird I have on the middle of the page a menu mobile icon there and when I click on it then I see the menu content on the left
Also all items (or sections I don’t know) are separated each ones by a large blank space…I don’t know if it’s something expected

BTW which theme have you used maybe the one you choose is not fully compatible with Elementor?
Personally I used OceanWP which if fully compatible and I build from scratch my pages with Elementor but you can also used the theme template with Elementor if you prefer.

Thanks for the response, bkantique!

The site is a prototype “sandbox” I’m working in, so there are several blank spaces and other wierd things there. The problem I’m trying to fix is the “fixed” image that appears on the landing page, the “News” page, and down further the “Shawn..Fiber Artist” page. All of them are sections with fixed backgrounds that work fine on my pc, but not on my iphone or ipad.

I am using OceanWP. Latest versions of OceanWP and WordPress. I’ve tried disabling all plugins and clearing the cache, but that makes no difference. I read on another forum that ios devices have an issue with fixed pages, so I either need to scrap using fixed pages or find a proper fix.

Ok clear
I just performed a test on my dev site
I create a new section in a single page the I add an image background then below the image there are 4 drop down list the first one is the selection I let it as default and the second one is named joined file (or attached file I am not sure as I work in French….) but here if I select Fixed then I have an advice : Remark: the fixed attached file works only on computer…
Then if you have select also this looks now logical the behavior on iPhone and iPad no?
Maybe better to let default or chose the third option ??scrolling?? to be tested

Yes, the Attachment: fixed works correctly on my computer, but not on my ipad or iphone.

The scroll (or default) options work correctly on all devices (computer, ipad, and iphone).

Unfortunately, I wanted to use the scroll setting, which is a very nice effect.

Ok but sorry if I looks confused but for me you should not used fixed for attachment file it won’t never works on you iPhone or iPad then the only choices are default or scroll
So if you’ve selected this option fixed on your images on the landing page you should change this
Maybe a small screenshot of’your Elementor’s Settings for this page of your images will help me to understand ??

I am having a similar problem, using OceanWp also, but menu doesn’t work on my iphone, images are missing. Does this mean they are too big or ?
What is meant by the statement that images must be fixed? to show up.

I’ve got the hamburger menu showing but it does not open anything, it shows up fine inside wordpress admin, but nothing on the phone even resembles it.

Also, the site opens up very slowly also, do I need to downsize the images on the home page, if so what size should they be? Thanks for the help. I love Elementor very much, just wish the mobile phone would work for me.

Well my thinking and sorry I am not an expert of WP yet as I started with it few months ago is you need to build different pages depending of the devices.
But what I understood for having a mobile website is first to create the mobile version then once done you create your computer version.
How to do that ? You reduce your browser window to the size of your iPhone then you create the sections you want with the elements you want to show up like scrolling images.
For each section in the section advanced tab you should have a ??responsive?? menu in which once deployed you have 3 show up choices then you can select show up only on mobile.
Once you’ve completed this you go on iPad construction by doing the same as above with once you’ve put your browser window at the size of your iPad.
At the end you build your computer version as the other versions but with fixed images.
About the hamburger menu what I done for my website is I put the ??navmenu?? widget you have in Elementor pro which is cost not too much and worth it for the price you pay.

Just to mention that personally I built all my pages by choosing the Elementor canvas meaning without any elements coming from OceanWP (no header, no footer for instance)
By doing this I am totally free to organize my page as I want even if OceanWP is a great theme with plenty of settings I prefer this approach.
After it’s a choice if you want to mix OceanWP thème canvas with Elementor it’s possible too.

I’m using OceanWP and the Canvas mode, also. The problem that I still have with the fixed background mode is that if the background attachment is switched to Scroll in tablet mode, that setting carries over into the Desktop or Mobile modes, as well. It seems that I cannot use fixed attachment in desktop mode, but scroll in the tablet or mobile modes. I wish these settings could be different for each of the display modes.

Ok I think I see what you means.
Maybe the solution is to build 2 sections in your elementor canvas strictly similar but the first one with fixed attachment AND select the option visible for computer.
Then the second section with scrolling images AND select the option visible for mobile and tablet

Thanks, bkantique. I just discovered that multiple sections, each with different responsive settings (desktop, tablet, and mobile) was possible. I will try that approach. Thank you for your suggestions!

Hi bkantique: thank you for your help, I did not know you had to create on mobile phone version first. I wish I had known this. I guess I have to start over again. I thought I could use the page template I liked, and edit that so that’s what I did.
Yes, I have been deploying the Mobile Menu to see how it looks on a phone and it appeared fine, but when I went to my real phone it was messed up.

Question 1: so if I build the site on the iPhone version what size images are best? I noticed when I tried to edit in the mobile version – there was no option to delete sections.

Sorry I don’t have the pro version yet, is that the only way to get a Menu to work on a mobile phone? It worked at first and then it stopped working.

I didn’t use the blank canvas route as you did, did you use any of the templates in any of your build, or just build from scratch? Thanks again for your help.