-
Posts
-
Hello guys,
I’m trying to set up two buttons on the same row and center aligned on the page.
I tried out some of the suggestions on the forum and although I got them to stay next to each other on the same row, they are left aligned instead of centered on the page.I’m including my site and the custom CSS I’ve used.
Please let me know if you need anything else.Thanks!
Hey Radu_P,
To center align two ro more buttons please refer to this link
https://kriesi.at/support/topic/section-button-alignment/#post-721210Best regards,
VinayHi Vinay,
That seems to work, but I need to make the gap between the two buttons smaller.
How can I do that without affecting the other buttons on the site? Right now when I change margins, the three buttons under the three columns below also change positions.Thanks!
RaduHi,
To change the gap on only these two buttons you will need to enabled custom css classname support.
in the link above: https://kriesi.at/support/topic/section-button-alignment/#post-721210
the post points to: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
to show you how to enabled custom css classname support.Best regards,
MikeHi,
Not sure what you mean, since I already have it enabled and am using it.
Are you saying I should use a class just for those two buttons? But wouldn’t that make the entire *Button alignment* code useless? (since I wouldn’t be using .btn class anymore)Hi,
Try this code in the General Styling > Quick CSS field:.btn-group .btn { min-width: 100px!important; }My test worked on the two top buttons & didn’t effect the bottom three
Best regards,
MikeHi Mike,
That seems to work on desktop and mobile in portrait view, but not when you resize the browser or in mobile landscape.
In intermediate screen sizes, the three buttons lose their alignment:
Hi,
The code I provided you earlier works for a group of button elements in column. It appears you are using a single button element in one column. We need to take a closer look at the backend setup Please post us your login credentials (in the “private data” field), so we can take a look at your backend.
Login credentials include:
- The URL to the login screen.
- A valid username (with full administration capabilities).
- As well as a password for that username.
- permission to deactivate plugins if necessary.
Best regards,
VinayHi,
We added a custom class “.btn-center” and the below css in Quick CSS to center the buttons.
.btn-center { position:relative; left:50%; transform:translateX(-50%); }Please review the site now :)
Best regards,
VinayHi guys,
Sorry for the late reply.
The problem seems to have been fixed, but some of the changes that I had made have been reverted. The two things I found are:
1) the min-width of the large buttons, which I had set at 168px, doesn’t work anymore
2) the spacing between the two buttons was set to a smaller value, seems to have been reset.Also, is it possible that the code you added has made it impossible to hide center aligned buttons with “display:none” ?
I’m asking because I’m trying to show left aligned buttons on desktop and center aligned buttons on mobile. To achieve this, I’m hiding each of the buttons on the width where I don’t want them to show.Hi,
The code provided earlier does not affect the display property please use this css to display elements only on mobile or desktop
http://pastebin.com/raw/UyMiZgsa
It may be a cashing issue with the min width please deactivate any caching plugins and hardrefresh the page a few times to empty browser cache to preview new changes.
Best regards,
VinayHey Vinay,
I don’t seem to have any caching plugins active or installed and I checked on multiple computers, so I’m guessing caching isn’t the problem. This the button I’m trying to target, so that both will have equal widths:
Thanks,
RaduHi,
To make both the buttons same width please give the buttons a custom css class name “same-width” and use the css rule min width to give them both a minimum width.
To enable the custom css class field: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
.same-width { min-width:220px; }Adjust the min width value as required.
Best regards,
VinayHi Vinay,
I tried it before, but this changes the space between the buttons. I’ve attached an example.
Is this not happening at your end?Hi Radu_P,
The min-width of 168px will leave enough room between and buttons will be of the same size in the center.
Let us know if you have any more questions.
Best regards,
VictoriaHi Victoria,
The code provided by Vinay doesn’t work, nothing changes.
What seems to work is this:
.avia-button.avia-size-large
{min-width: 168px;}However, this seems to affect all large buttons in the site, so I’m still unable to target just that one button.
Also, this code makes the space between buttons too small on tablet resolution :(Please help!
RaduHi Radu,
You can give the buttons a custom class a specify the rules for them or give that section an id, ad specify the rules via that id, so that other buttons on the website are not affected.
.same-width (but for the parent div better) { min-width:168px; } .same-width:first-child { margin-right: 20px; }Let us know if you have any more questions.
Best regards,
Victoria
- You must be logged in to reply to this topic.