Gap between column buttons

[Anton]

Hello guys,

I’ve always had this issue, but I really want to fix it now.

There is always a gap between the buttons I create in columns. It doesn’t matter if I use columns from Shortcode ultimate or Tom’s lightweight plugin.

I have also tried making the buttons tiny, but it’s still unequal gaps between the buttons.

You can see a screenshot here: https://imgur.com/a/5R6XSNg
The first 3 buttons are in Ultimate shortcode columns. The 3 buttons below are done with the help of Tom’s lightweight column plugin.

The biggest difference is between the 2nd and 3rd button.

How do I make the gaps equal?

Thanks in advance.

Best regards,
Anton

[David]

Hi there,

do you have a page where i can see this?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Anton]

Hi David,

Sure: Deleted – added it to the original topic Site URL

Could you please delete the address from the forum once you have copied it?

Thanks!

[David]

Do you need to be adding columns?
<a> links ( for the buttons ) are inline so they should just align themselves within the available space

The alternative is to target those particular rows with 3 buttons and add this:

.su-column-inner {
    text-align: center;
}

Not sure how the SU shortcodes work and if you can add a custom class to target them specifically.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Anton]

Unfortunately the buttons appears below each other like this when I do it without columns:

Button 1
Button 2
Button 3

When I add the between them there is some space between, which is good. But they are on new lines.

The SU custom class didn’t work.

For the site I am working with, my buttons look like this:

.example_c {
color: #ffffff !important;
text-transform: uppercase;
background: #57A970;
padding: 10px;
border: 3px solid #4C9261 !important;
border-radius: 6px;
display: inline-block;
font-size: 16px;
}

<div class="button_cont"><a href="Adress" target="_blank" rel="nofollow noopener noreferrer">Button name</a></div>

[Anton]

My apologizes, it shouldn’t say “button name”. Having some issues showing the actual code.

[David]

Hmmm tricky styling shortcode content.
You could try this to make all buttons fill the column they are in and to reduce the button padding to eliminate line wrap:

.su-column-inner .su-button {
    width: 100%;
}

.su-column-inner .su-button>span {
    padding-left: 7px !important;
    padding-right: 7px !important;
}

Would suggest clearing all caches to see if the code is working.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Anton]

Cheers David. Unfortunately no luck, nothing changes.

This might be way out of scope for you (in terms of GP support, not knowledge), since it’s CSS coding and not really related to Generatepress. Initially I thought my issue was maybe caused by the theme.

Perhaps I should create my buttons in a different way?

[Anton]

So it was that easy – I made buttons in both SU and some other plugin I downloaded, and no gap.

Thanks a lot for your help David!

Have a nice weekend!

[David]

Glad to hear you got it resolved 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts