This topic has 7 replies, 3 voices, and was last updated 6 years by Radu.

  • Author
  • #176976
     technitoit
    Participant

    Hello,

    I’ve noticed that custom headings still have animation on it even when the option “Disable on mobile devices only” or “Disable on all devices” are checked. It’s an issue on one page designs on mobile, because my headings takes a lot of time to appear on some devices. For now I double the heading, one with animation with visibility on computer and one with no animation with visibility on mobile devices. It works but I’m not sure about the quality of this kind of thing regarding SEO.

    #177036
     Laura
    Moderator

    Hello, will assign the ticket to a higher support level who can help and advise you in your query.
    Thanks! ?

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

    Laura Solanes - Graphic Designer and Web Designer

    Please be patient as I try to answer each topic as fast as i can.

    If you like the theme or the support you've received please consider leaving us a review on Themeforest!

    Always happy to help you 🙂

    #177057
     technitoit
    Participant

    Thank you, let me know if they find a solution.

    #177128
     Radu
    Moderator

    Hi,

    Add this css in quick css area

    COPY CODE
    
    .animated,.wpb_animate_when_almost_visible  {
     /*CSS transitions*/
     -o-transition-property: none !important;
     -moz-transition-property: none !important;
     -ms-transition-property: none !important;
     -webkit-transition-property: none !important;
     transition-property: none !important;
     /*CSS transforms*/
     -o-transform: none !important;
     -moz-transform: none !important;
     -ms-transform: none !important;
     -webkit-transform: none !important;
     transform: none !important;
     /*CSS animations*/
     -webkit-animation: none !important;
     -moz-animation: none !important;
     -o-animation: none !important;
     -ms-animation: none !important;
     animation: none !important;
     opacity: 1 !important;
     filter:none !important;
     
     }
    

    IF you want to turn off only on mobile devices use the next css

    COPY CODE
    
    * Small Devices, Tablets */
    @media only screen and (max-width : 768px) {
    	.animated,.wpb_animate_when_almost_visible  {
     /*CSS transitions*/
     -o-transition-property: none !important;
     -moz-transition-property: none !important;
     -ms-transition-property: none !important;
     -webkit-transition-property: none !important;
     transition-property: none !important;
     /*CSS transforms*/
     -o-transform: none !important;
     -moz-transform: none !important;
     -ms-transform: none !important;
     -webkit-transform: none !important;
     transform: none !important;
     /*CSS animations*/
     -webkit-animation: none !important;
     -moz-animation: none !important;
     -o-animation: none !important;
     -ms-animation: none !important;
     animation: none !important;
     opacity: 1 !important;
     filter:none !important;
     
     }
    }
    
    

    The CSS will be added to wp-admin -> theme options -> general settings -> quick css

    Cheers
    R.

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    #177130
     technitoit
    Participant

    Wow, that was quick, thanks a lot. Tested and works well now.
    I found this bug on custom titles, but maybe there’s other elements that have the same bug. Does the css fixes all kind of situations ?
    Will that be corrected on the next update of the theme maybe ?
    Have a good day and thanks for your time.

    #177136
     Radu
    Moderator

    Hi,

    I’ve targeted also the class ‘wpb_animate_when_almost_visible’ which thru this class some animations are applied and that it’s added by the visual composer for all their elements that have set animation for animate when almost visible.

    The css rule should fix that!

    Let me know if you notice a problem on any element

    Cheers
    R.

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
    #177141
     technitoit
    Participant

    Ok thanks for the precisions. Is it planed to be part of an update of the theme, or will I need to do this hack everytime ?

    #177231
     Radu
    Moderator

    You will have to add the css on every install, but if you will use kleo child and you will paste the css to wp-content/themes/kleo-child/style.css will be keep even if you update the theme.

    Cheers
    R.

    Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
Viewing 8 posts - 1 through 8 (of 8 total)

The forum ‘Bugs & Issues’ is closed to new topics and replies.

Log in with your credentials

Forgot your details?