- This topic has 9 replies, 2 voices, and was last updated 4 years, 6 months ago by David.
-
AuthorPosts
-
October 4, 2019 at 5:17 am #1026061Anton
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 #1026080DavidStaffCustomer SupportHi there,
do you have a page where i can see this?
October 4, 2019 at 5:38 am #1026083AntonHi 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 #1026084DavidStaffCustomer 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.
October 4, 2019 at 6:19 am #1026092AntonUnfortunately 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 #1026098AntonMy apologizes, it shouldn’t say “button name”. Having some issues showing the actual code.
October 4, 2019 at 6:56 am #1026103DavidStaffCustomer 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.
October 5, 2019 at 6:07 am #1026828AntonCheers 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 #1026836AntonSo 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 #1026838DavidStaffCustomer SupportGlad to hear you got it resolved 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.