[Resolved] Button Text and Icon Alignment

Home Forums Support [Resolved] Button Text and Icon Alignment

Home Forums Support Button Text and Icon Alignment

  • This topic has 9 replies, 3 voices, and was last updated 2 months ago by Ying.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #2005381


    I am putting together a design for a client that has a design with a series of wide buttons with the button text aligned to the left and the button icon aligned to the right as shown in the attached link.

    I have tried to use the Generateblocks button option to create this design but I am struggling to get things aligned – my version is picture 2 on the attached link.

    I don’t think I can do this via the button options but could possibly do it via css but I am struggling to work out the code.

    Is it possible to do it this way at all?

    Customer Support

    Hi there,

    Any chance you can link us to the site in question?

    You can use the private information field:

    Let me know πŸ™‚


    Sure – done.

    The buttons are on the News archive page

    Customer Support

    Hi Rob,

    Try this CSS:

    .np-archive-buttons > .gb-button {
        display: flex;
        justify-content: space-between;

    Let me know if this helps πŸ™‚


    Hi Ying,

    I added that code to my child theme style.css file but it seems to have not changed anything. The button text is still in the centre.

    Customer Support

    I tried adding the CSS to customizer > additional CSS, and it works well. It means the CSS is correct.

    So there might be some errors in your child theme style.css file, you can use a tool like this to check all your css:


    Thanks Ying – it works if I add it to customizer > additional CSS but still doesn’t work if I just rely on using the child theme style.css.

    I checked my child theme style.css and everything is valid. I even stripped all CSS out of there and just added your CSS for the buttons and it still didn’t work. I even added a red border (this is still active if you care to look) to each button in the style.css code and that does display but for some reason it does not align the text as it does when using the customizer to add the CSS. I am a bit confused why it didn’t take any notice of the exact same code in the style.css file.

    Do you have any idea why this occurred?

    Customer Support

    So it looks like if the CSS is added to child theme, it will be overridden by the GB CSS eventually.

    Then try this CSS instead:

    .np-archive-buttons.gb-button-wrapper > .gb-button {
        display: flex !important;
        justify-content: space-between !important;

    That is brilliant – it works.

    Thanks so much for your help.

    The support that you provide is outstanding.

    Customer Support

    You are welcome πŸ™‚

    Very glad to be helpful!

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.