Bounce and slide elements

My entire site seems to bounce or slide. I have a caching plugin on right now to see if it would address it but it does not help. The header bounces and slides, the text bounces. I can not figure out the cause. I was told previously it was a cache issue but it feels like flex run amuck to me. Is there any way you know of I can address it? Thank you.

Hey There,

To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Regards.

https://www-9ygav.hosts.cx/ but to see it at its best go to a page like https://www-9ygav.hosts.cx/trips-tours/multiday-kayaking-trips/ Thank you and my apologies for that oversight.

Hello there,

Can you provide us the IP address of your server and domain name in a secure note so we can access your site? I can see you’ve used a website previewer.

Also, please add your Wordpress User/Pass on the secure note. This way we can check your slider problem further.

Thank you.

Hi there,

I managed to access your website and checked the page in question. I still can not see what do you mean by bounce? Give us a screenshot and screencast of the case and more detailed explanation of the case. What I saw on the page is that there are several Javascript problems.

One that I detected was originated by the Revolution Slider. I went to the vid_multiday slider and selected the options below there:

That fixed many of the Javascript issues. There are still other Javascript issues regarding the usage of Angular and CloudFront Time Zone which I am not sure where those are originated.

Most probably those are 3rd party plugins conflicts. Test for a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Thank you.

Sorry for the delay. Here is a screen capture. You can see it in the menu https://screencast-o-matic.com/watch/cFfir1Dsi2

New access to the site: http://37.60.253.186/~anacorte/

Thank you very much! BTW I did test for plugin conflict and it did not help.

Hi there,

Now that I see the screencast you gave I understood what you mean by jumping. Actually, that is a normal behavior of the slider as it needs time to load the image in the slider and before the video load, there is no space to fill in.

You can not do anything about that as it takes time to video to load. But you can force a minimum height to the container of the slider. So I added a CSS code below to X > Theme Options > CSS:

.x-slider-container.below {
  min-height: calc(100vh - 169px);
}

The calc(100vh - 169px) means that set the height of the container to the height of teh browser windoe and reduce 169px from it to show the top header section.

Also please check the vid_home settings which I set it to be full screen and added the .masthead to reduce the size to show the header.

Thank you.

1 Like

I am trying to understand the calc. The effect on the front end is that there is an image with a large white space (169px?), then the bottom border, and then the page content starts. I changed it to this and it removes that space but don’t want to discover I have made a mess of things for other viewports. Will this change be ok? Thank you @christopher.amirian

.x-slider-container.below {
min-height: calc(100vh - 600px);
}

Hello There,

To better understand calc, please check this out:

Your code may work. In some device screens, it may create some issues. I wold suggest you add a media block so that you can specify when the code will work. For example, if we use the code below, it will make sure that it will only take effect in larger screens:

@media(min-width: 980px){
  .x-slider-container.below {
    min-height: calc(100vh - 600px);
  }
}

Hope this helps.

1 Like

Thank you! Study time :slight_smile:

You are most welcome!

@christopher.amirian I don’t think I made mention of this. It is fantastic now! Thank you.

Glad we could help :slight_smile:

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.