-
AuthorPosts
-
November 17, 2020 at 10:51 pm #1261143
In the color section, I changed the mobile image under the style and clicked off under Element Visibility on the desktop.
The problem I’m having is the image on the mobile device is not moving with the fix-like on the desktop.
On mobile device the image is stuck in the center and doesn’t move.
Here’s the link.
I feel like I’m so close. Maybe I didn’t do something correctly. Any help would be appreciated.
Thanks.
- This topic was modified 3 years, 12 months ago by harris.
November 23, 2020 at 1:38 am #1262195Hey Harris,
Sorry for the late reply and thanks for the link to your site, I believe you are referring to the background parallax effect on mobile devices such as iPhone, unfortunately there is a known browser issue for Safari with this. To date, I have not found a solution for this.Best regards,
MikeNovember 23, 2020 at 4:40 pm #1262435The background is set to fix.
I tried google browser and firefox still no good.
But it works in the WordPress simulator shows it working.
I may have to live with it or just change it to a color background for mobile.
If you have any suggestions please advise. Thanks.See the video link.
November 24, 2020 at 3:09 pm #1262694Hi,
Sorry, perhaps I’m not understanding correctly, can you also make a video of what you are seeing in the WordPress simulator, and can you post a dropbox link to a plain text file with your page shortcode so we can test?
You can get the page shortcode by following these steps: Enable Avia Layout Builder DebuggerBest regards,
MikeNovember 24, 2020 at 5:08 pm #1262745There was already a link to the video posted I guess you missed it. Here it is.
As you can see on the WordPress simulator the background image is visible.
On the mobile web browser, the background image is missing until you scroll.
November 25, 2020 at 2:53 pm #1263004Hi,
Thank you, this is because on IOS fixed background doesn’t work properly when its background-size is set to cover.
So what we can try is to change the background-size to “contain” instead of “cover”.
Please try this code in the WordPress > Customize > Additional CSS field:@media only screen and (max-width: 767px) { #av_section_2 .av-parallax { background-size: contain !important; } }
After applying the css, please clear your browser cache and check.
Best regards,
MikeNovember 25, 2020 at 8:22 pm #1263072Hey,
Thanks, that didn’t work either. I guess it is what it is unless you have something else up your sleeve.
- This reply was modified 3 years, 11 months ago by harris.
November 26, 2020 at 2:17 pm #1263262Hi,
Perhaps this solution will work for you instead.
If not then can you include a admin login in the private content area so we can investigate further.Best regards,
Mike -
AuthorPosts
- You must be logged in to reply to this topic.