Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 3, 2017 at 5:44 am #754811
    mxshi

    Hi,

    I have a page where I want three buttons in a row with a space of 5px between them, but it currently looks like this:
    buttons

    I put the buttons in a 1/2 section in a grid row with left, center, and right alignments respectively. How to get them to line up?
    Also it needs to work on mobile with the 3 buttons next to each other on one line.

    Thanks in advance.

    March 3, 2017 at 10:48 am #754949
    Vinay

    Hey mxshi,

    To place 3 buttons side by side please check this post https://kriesi.at/support/topic/section-button-alignment/#post-721210

    In the example I have added 2 buttons but you can add the third one :)

    Best regards,
    Vinay

    March 6, 2017 at 10:08 am #756274
    mxshi

    Hi,
    I’ve managed to fix it on the desktop version but on mobile it still looks like this for some reason:
    buttons

    Also I can’t seem to control the left padding on mobile of the image on the top (“empowered by #be”)? It should be left-aligned but there’s some extra space there.

    Thanks!

    March 8, 2017 at 9:17 pm #758032
    Vinay

    Hi,

    There are two way’s you can set this up:

    1. Create a header widget area by applying the code provided in this link to functions.php http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/
    and add the button html code in the widget area.

    2. Create 3 button styles menu items from Appearance > Menu

    We recommend using the 1st method as this will display the buttons the same way it does on desktop.
    By using the second method to access the buttons users will have to click on the hamburger menu icon.

    You can copy the button shortcodes to the header widget area and add the css in the link provided earlier to quick css section.

    Should you have any issue 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,
    Vinay

    March 9, 2017 at 5:49 am #758154
    mxshi

    Hi Vinay,

    I added the code to my functions.php file but it doesn’t seem to do anything. There are no widget areas when I try to customize my page. Also, the area I’m trying to customize isn’t a header menu, it’s simply a grid row within the page. Will the options you gave also work for that?

    I’ve included the login below if you could take a look.

    Thank you.

    March 10, 2017 at 7:11 am #758708
    Vinay

    Hi,

    Thank you for the credentials, we have updated the code in Quick CSS please review the site now :)

    Best regards,
    Vinay

    March 10, 2017 at 8:15 am #758734
    mxshi

    That looks much better, thanks!
    Just some small things though:

    1) I have the CSS applied to two different pages, however, on mobile the three buttons look different on each page:
    comm hr
    If possible, can they look like the version in blue?

    2) It seems like now the other button on the page is left-aligned, even though in the advanced editor, I made it center-aligned.
    1 2

    Thanks!

    • This reply was modified 7 years, 8 months ago by mxshi.
    March 12, 2017 at 7:17 pm #759666
    Vinay

    Hi,

    Please refresh the page a few times to preview the changes.
    We added a class name “btn-center” to the signup button and custom css.

    Hope this helps :)

    Best regards,
    Vinay

    March 13, 2017 at 5:29 am #759816
    mxshi

    Thanks! That seemed to mostly solve it. Feel free to close this thread

    March 14, 2017 at 4:51 am #760405
    Rikard

    Hi,

    Thanks for the feedback. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Placing 3 buttons side by side’ is closed to new replies.