[Resolved] Button Text and Icon Alignment

[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?

[Leo]

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 🙂

[Rob]

Sure – done.

The buttons are on the News archive page

[Ying]

Hi Rob,

Try this CSS:

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

Let me know if this helps 🙂

[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.

[Ying]

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

[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?

[Ying]

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;
}

[Rob]

That is brilliant – it works.

Thanks so much for your help.

The support that you provide is outstanding.

[Ying]

You are welcome 🙂

Very glad to be helpful!

[Author]

Posts