[Resolved] Circle Container with Centered Headline

[amgp]

Hi! How can I do this style, Container and Centered Headline?

My Wesbite

Sample

[amgp]

Link photo updated.

[Fernando]

Hi Amgp,

From the sample you provided, are you trying to put a Headline centered in the middle of a perfect circle Container or are you simply trying to add a Headline within a Container not necessarily perfectly round?

If its the first scenario, one approach you can try is to do a setup similar to this: https://share.getcloudapp.com/qGur7jo8

Also see: https://share.getcloudapp.com/OAu469bw

Also see: https://share.getcloudapp.com/bLuxKzej

Basically, I placed a Headline within a Container, I added a fixed width to the container and then added a 100% top padding to it. I also made all its Border Radius to 50%. Lastly, I also added a class (“test-holder”).

After doing these, I then added this custom CSS:

.test-holder {
        position:relative;
    }

.test-holder .gb-headline {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    }

Testing on my page, this is what it looks like: https://share.getcloudapp.com/RBuyn5L9

Feel free to adjust to width of the container to your preference through its settings.

Refer to this to locate where to adjust the width: https://share.getcloudapp.com/E0uog5DR

This should apply to all Containers with a Headline within it as long as it has the class you’ll be setting as the selector for your CSS.

Here’s a link you may refer to regarding information on how to add custom CSS: https://docs.generatepress.com/article/adding-css/

Otherwise, you may simply add a Headline within a Container and change the Border Radius to 50% all around and change the spacing as necessary.

Hope this helps. 🙂

[amgp]

Hi Fernando, thank you.

[Fernando]

You’re welcome! Glad to be of help! Feel free to reach out if any further help is needed! 🙂

[Author]

Posts