Can't position in center

Ande

Hi! I use Buttonizer Pro and want to have a button centered on my page. The problem is that when I use the horizontal position function and chooses center, it aligns the edge of the button to the center. As the page has a very clear center (two columns), this looks really weird. I made a sketch to show the problem.

Obviously, I want the center of the button to align to the center of the page to make it symmetrical. How do I achieve this?

Of course, I can manually adjust the scale to shift the position slightly, but then it will only look good in full screen at that specific resolution. As soon as the window is resized the button move away from the center again.

Best regards,
Andreas

Jasper

Hi Ande !

This should be possible if you set the horizontal advanced position on right and set the value to 48%. After changing this, the circle seems to be correctly in the center 🙂

Let me know if this helps.

Ande

Hi Jasper!

Thank you for your reply! This sort of works, but as soon as I change the size of the window or the screen resolution it gets misplaced again, so that is not really a good solution. I want the button center to always have the same distance to the left and right edge, regardless of window size or screen resolution.

Best,
Andreas

Jasper

Hi Ande , thanks for your reply! Ah I see. In that case I would suggest to revert the position to 50% and add the following CSS to your site:

.buttonizer.buttonizer-group {
   transform: translateX(50%);
}

This might be something we should implement by default if the horizontal position is set to 50% and the button style is set to the default menu style.

Let me know if this helps 🙂

Ande

Ah, that seems to do it! I tried that actually but got the first row all wrong. Is it by any chance possible to apply this to one particular button only with the ID function?

Best,
Andreas

Jasper

Ande Of course, just change .buttonizer.buttonizer-group to the ID of the menu 🙂

For example, if the ID of the menu is centered-buttonizer-button, you should use CSS selector: #centered-buttonizer-button.

Ande

Jasper This is what I have tried, and when I change to the button ID it doesn't work anymore. Any ideas why?

Now I have:

#my-button-id { transform: translateX(50%); }

Jasper

Ande Could you let me know what the website is? Then I'll be able to take a look 🙂

Ande

Jasper This is the page: https://phiab.com/improve-your-cell-cycle-research-with-holomonitor/

It is the white contact button that has the issue.

Jasper

Ande I've found the issue! First of all, in the custom CSS you used #centered-button while the ID is set to center-button

Secondly, I think I've found a little issue: the custom ID is set to the button instead of the group... Could you temporarely add a second button to that group, then go to the settings of the group and set the custom id for the group? After that, remove the tempory button.

Let me know if this helps 🙂

Ande

Jasper Haha, I wanted to test another button ID but forgot to publish the button so only the CSS changes were applied... Anyway, even with the same button ID the problem persisted.

However, your second idea worked! The problem was that the ID was assigned to the button and not the group, just as you suspected. It works now, thank you very much for your help!

Best,
Andreas

Jasper

Ande Awesome! 😃

If you need any help in the future, let us know 🙂