Revolution Slider button layer off-center on page load

Support
#1

I have a button layer that appears off-center on page load, but “snaps” back into place after the page is resized. I have ensured that the button layer is centered in the layer settings. This only happens for a button that appears on the mobile breakpoint and below, which is set at 480px.

I have two buttons above the mobile breakpoint that both work with no issues. I tried to duplicate one of those and apply the positioning for the mobile button, but that didn’t work.

I’ve tried the global setting for making the JS load in the footer, and that didn’t work either.

Any help would be appreciated, I can provide more information if necessary.

Before page resize:

After page resize:

#2

Hey There,
​
​To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation.

To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
Thank you.

#3

Is this a known issue? Currently the site is only a localhost version, so there isn’t a public version I can share at the moment. I would have to take some time to make a publicly accessible version.

Are there any steps I can take to troubleshoot this further before I share a version of the site?

#4

Hi Michael,

Could you please try following this video guide by Slider Revolution (https://www.youtube.com/watch?v=OIJShHQlMx0) and see whether you have setup correctly.

Hope that helps.

#5

I watched the video, it was just a demonstration of the breakpoints. Everything is working except the button on the mobile breakpoint. Here are the settings I currently have.

#6

Hello There,

I have logged in and check the slider in your staging site. Please be advised that the slider needs to initialize to be able to load up all the slider elements. I would recommend that you remove the slider shortcode out of the Content Area element and use the Revolution Slider element directly.

Content Area element has a different purpose which may have affected the way the slider initializes on the page.

Hope this helps.

#7

Thank you! I’ll try that out and report back.

Edit: I replaced the content area element with the “Classic Revolution Slider” element and the issue still persists.

#8

Hi @FaHT,

I just checked and it’s perfectly aligned upon load and there is no need to resize it. Perhaps you already fixed it? Or maybe it’s due to cache. Could you confirm it again?

Thanks!

#9

I still see the issue on my end. I have done a “hard refresh” (Ctrl + F5) to force reloading all page assets, and I still see it.

Note that it only happens when you load the page in a mobile resolution (480px or below).

#10

Hello There,

I have edited your slider and made changes of the horizontal offset of the button.

The offset need to something else other than zero.

Please check the slider again in your site now.

#11

While that technically fixes the issue when loading on mobile, now the button is off-center if you resize down from a larger size window. The button needs to be centered at all resolutions.

#12

Hi There,

I’ve changed the layer width to auto but no lucks. So I went to the Attributes tab, then assign the layer-button to the container layer.

After that add this custom CSS under Slider > Custom CSS:(https://i.imgur.com/cVZqNu8.png)

@media (max-width: 480px){
    .tp-parallax-wrap.layer-button {
        left: 50% !important;
        margin-left: -125px !important;
    }
}

Everything looks good now.

Hope that helps and thank you for understanding.

#13

Looks like that fixed the issue! Thank you!

#14

We are delighted to assist you with this.

Cheers!

#15

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