- This topic has 9 replies, 2 voices, and was last updated 3 years, 3 months ago by
David.
-
AuthorPosts
-
October 4, 2019 at 5:17 am #1026061
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,
AntonOctober 4, 2019 at 5:36 am #1026080David
StaffCustomer SupportHi 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/October 4, 2019 at 5:38 am #1026083Anton
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!
October 4, 2019 at 5:41 am #1026084David
StaffCustomer SupportDo you need to be adding columns?
<a>
links ( for the buttons ) are inline so they should just align themselves within the available spaceThe 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/October 4, 2019 at 6:19 am #1026092Anton
Unfortunately the buttons appears below each other like this when I do it without columns:
Button 1
Button 2
Button 3When 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>
October 4, 2019 at 6:43 am #1026098Anton
My apologizes, it shouldn’t say “button name”. Having some issues showing the actual code.
October 4, 2019 at 6:56 am #1026103David
StaffCustomer SupportHmmm 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/October 5, 2019 at 6:07 am #1026828Anton
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?
October 5, 2019 at 6:24 am #1026836Anton
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!
October 5, 2019 at 6:26 am #1026838David
StaffCustomer SupportGlad to hear you got it resolved 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.