Content with animation doesn't display on mobile

animation Mobile

- 4 years, 11 months ago insigndigital
  Participant
  
  Hello,
  
  I used the tower theme to create a website for a client, here is the URL : https://thewhyfactorcompany.com/
  
  If you go to the website on mobile device, you will that content doesn’t appear like it should (in desktop it works). So it seems that animation doesn’t work if you don’t scroll top to make it happen.
  
  I have checked the code and tried several things but it seems that nothing will work if i don’t delete animations.
  
  Could you tell me what can i do and if there is something to change in the .js ?
  
  Thank you very much.
- 4 years, 11 months ago Ludjon
  Keymaster
  
  Hi, I am trying to figure out what makes it happen.
  
  Can you please let me know, are u using the latest WPBakery and Tower theme version?
  
  Thanks
- 4 years, 11 months ago insigndigital
  Participant
  
  Hello,
  
  Everything is up to date so it is not cause by an old version of WPBakery or the Tower theme.
  
  Let me know if you need any further information.
- 4 years, 11 months ago Ludjon
  Keymaster
  
  Can you please send me WP login details so I can check it?
  
  Thanks
- 4 years, 11 months ago insigndigital
  Participant
  
  This reply has been marked as private.
- 4 years, 11 months ago Ludjon
  Keymaster
  
  Hi, I found out what cause the issue.
  
  Please check it now.
  
  Looks ok.
  
  Thanks
- 4 years, 11 months ago insigndigital
  Participant
  
  Hello,
  
  I checked and it somehow looks better but i still have trouble with animations on the home page for example when i try it on mobile.
  
  Can you give me details about what you did exactly ?
  
  Thank you.
- 4 years, 11 months ago Ludjon
  Keymaster
  
  I removed the Hoverex style file from loading, it causes a conflict with WPBakery.
  
  Did you try on mobile or just on browser simulator?
  
  Thanks
- 4 years, 11 months ago insigndigital
  Participant
  
  Hi,
  
  Actually everything looks fine while using browser simulation with WP but if you look at the website on a mobile or a tablette (iOS with safari or Chrome everything is up to date) it does not.
  
  Please advise.
  
  Thanks
- 4 years, 11 months ago Ludjon
  Keymaster
  For now, you can add this custom code and remove animations on mobile:
  
  @media (max-width:991px){ .wpb_animate_when_almost_visible{ opacity:1; } }
  
  We will fix it on next update
  Thanks
- 4 years, 11 months ago insigndigital
  Participant
  
  :(
  
  What about the other two issues ?
  
  – The sticky header that does not stick on mobile and tablette devices ?
  
  – The responsiveness of the images (recto) and the padding of the gif images (verso) of the hoverbox here : https://thewhyfactorcompany.com/leadership-thinking/ ?
  
  Thanks
- 4 years, 11 months ago Ludjon
  Keymaster
  The background image is set to ‘cover’
  
  You can try this to fix on responsive, sticky also:
  
  @media (max-width:991px){ .vc-hoverbox-block{ background-size:contain !important; } . header_wrapper{ position:sticky !important; top:0; } }
  
  This reply was modified 4 years, 11 months ago by Ludjon.
- 4 years, 11 months ago insigndigital
  Participant
  
  Thanks, I’ll try these fixes waiting for the next updates.
  
  Best
- 4 years, 11 months ago Ludjon
  Keymaster
  
  Ok, you will be notified with an email when the update should be ready.
  
  Thanks
- 4 years, 8 months ago insigndigital
  Participant
  
  Hello, the 2.9.1 update didn’t change the issue; can you confirm that ?
  Thanks
- 4 years, 8 months ago azam
  Keymaster
  
  @insigndigital
  I always recomend keep that kind of changes in your child theme, we recieve this types request but we cant enterain all of them due to making our product unique and remain perfect for all our client (Current and Potential).
  
  Thanks,
- 4 years, 8 months ago insigndigital
  Participant
  
  I don’t understand your answer.
  The theme is supposed to be responsive the animation on mobile are not.
  
  You don’t intend to fix that except by the additional code fix ?
- 4 years, 8 months ago azam
  Keymaster
  
  Theme is responsive and Animation is also working fine on your website,
  As Proof I can share a video.
  
  Ps. if still not working for you, mention your device and browser name.
  
  Thanks,
- 4 years, 8 months ago insigndigital
  Participant
  
  It does not on iphone (Chrome & Safari), ipad (Chrome & Safari) or Samsung S8 (Chrome).
  
  To fix the issue of the animation that only appear if you scroll up the support asked us to add this fix to the additional CSS section to force the animation (which is not elegant, plus you stil have the animation once again if you scroll up):
  
  @media (max-width:991px){
  .vc-hoverbox-block{
  background-size:contain !important;
  }
  . header_wrapper{
  position:sticky !important;
  top:0;
  }
  }
  
  The update to 2.9.1 didn’t fix that problem, so we still rely on that fix which is not great.
  Ludjon (you can see in that thread) mention that next update should fix that problem (3 months ago) and it does not.
- 4 years, 8 months ago insigndigital
  Participant
  
  Hello,
  
  Can you confirm the behavior on mobile and tablet devices without the fix in 2.9.1 update ?
  
  Will the next update fix the synchronization of the scrolling and the animation of each item on a web page on mobile and tablet ?
  Many thanks
  Best
- 4 years, 8 months ago azam
  Keymaster
  
  Hi,
  Yes, I can leave a note for Development Team, In Next update they will consider.
  
  Thanks,
- 4 years, 8 months ago insigndigital
  Participant
  
  That would be great Azam.
  Thanks.

Viewing 21 reply threads

You must be logged in to reply to this topic.

Community Forums

Content with animation doesn't display on mobile

Site Links

Useful Articles

Login