Fade in of widgets on mobile

Homepage Community Forums Aspire Theme Support Fade in of widgets on mobile

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #17886
    jamesjd7
    Customer

      The widgets that fade in when an internet user scrolls up takes a long time on mobile. It actually looks like the site is broken when a mobile visitor hits my site.

      https://www.apx.us/

      Is there a way to speed up the time that the images fade in so that the internet user on the mobile side knows to wait till it fades in. Or, is there a way to turn off the fade in when viewing on mobile screen.

      The problem arises on a mini ipad size too.

      Is there a solution?

      #17887
      Wes
      Moderator

        The fade effect loads almost instantly for me. I’m viewing on an iPhone and iPad mini and it’s definitely working fine. What type of phone are you using?

        You could add this in your responsive section if you want to change the speed –

        .js .fadeup-effect {
        		-webkit-animation-duration: 1s;
        	    animation-duration: 1s;
        	 }

        You can change the 1s (1 second) to whatever number you want. If you want it to load faster try experimenting with .8, .5, etc to see what works for you.

        That code will control the speed of the effect, so if you want that speed to show on a specific browser/width, then you can add that in the responsive section in your CSS (near the bottom).

        #17899
        jamesjd7
        Customer

          I’m using an iphone 6 plus. I’m also viewing on my ipad mini.

          where would the responsive section be? I’m a novice.

          #17922
          Wes
          Moderator

            Scroll to the bottom of your CSS and you’ll see sections like this –

            /* # Media Queries
            ---------------------------------------------------------------------------------------------------- */
            
            @media only screen and (max-width: 1800px) {

            I would start by adding it in the (max-width: 960px) section first to see if that’s what you want.

            @media only screen and (max-width: 960px) {
            
          Viewing 4 posts - 1 through 4 (of 4 total)
          • You must be logged in to reply to this topic.