[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
    Posts
  • #2005381
    Rob

    Hi,

    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?

    #2005402
    Leo
    Staff
    Customer Support

    Hi there,

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

    You can use the private information field:
    https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

    Let me know πŸ™‚

    #2005457
    Rob

    Sure – done.

    The buttons are on the News archive page

    #2005485
    Ying
    Staff
    Customer Support

    Hi Rob,

    Try this CSS:

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

    Let me know if this helps πŸ™‚

    #2005503
    Rob

    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.

    #2005508
    Ying
    Staff
    Customer Support

    I tried adding the CSS to customizer > additional CSS, and it works well. It means the CSS is correct.
    https://www.screencast.com/t/tQDxTchwsC

    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:
    https://jigsaw.w3.org/css-validator/#validate_by_input

    #2005534
    Rob

    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?

    #2005570
    Ying
    Staff
    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;
    }
    #2005581
    Rob

    That is brilliant – it works.

    Thanks so much for your help.

    The support that you provide is outstanding.

    #2005583
    Ying
    Staff
    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.