Create Circle Button with CSS

Hi there,

can you share a link to a page where that can be seen ?

Hey David,

Yes, please see it in private.

Thanks,
Fergal

Hey team,

Wanted to resurface this for help please. If I should create a new topic please let me know.

Thanks,
Fergal

Hi Fergal,

Sorry, don't know how but your response somehow slipped through our system. No need to create a new topic.

In what way do you want it centered? Do you want it centered vertically/horizontally relevant to the container or something else?

Let us know. If you can provide a sketch of how it should look like, that would be great as well.

Hey Fernando,

No problem. I know you all are busy with topics so didn't want to rush to re-open, but was starting to think there was some kind of issue. Thanks for the quick follow-up.

I'm looking to horizontally center the button in mobile and tablet. In private I've provided more information. Please let me know if more details are needed from me.

Thank you.

I see. Have you tried Center aligning it through the toolbar settings of the Buttons Block? Example: https://share.getcloudapp.com/xQuxodAE

Hey Fernando,

I did try center aligning the buttons block. In the editor the button looks centered, but when I go to the actual page it is left aligned still. Removing position-relative from my-circle-button seems to center the text, but not the button. Any idea why this is?

In private I've tried to include everything I can think of that is involved in this button and the layout. Please let me know if you have any questions on these settings.

I see.

Try adding this:

@media (max-width: 1024px) {
    .gb-container.placeholder-div > .gb-inside-container {
        display: flex;
        justify-content: center;
    }
}

Add placeholder-div to the Container columns of the Grid Block.

Fantastic! That did the job, thanks Fernando!

You're welcome Fergal! Glad that worked!