Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • December 19, 2015 at 1:36 pm #555401
    Kahaa

    Hi,

    I have a weird situation that I cannot solve and will need some support.

    I am trying to create an on-page menu with three buttons next to one another and centered on the page, in a section and a full with layout element.
    I’ve managed to create this perfectly with a custom class applied to the full-width layout element and “text-align: center;”, as the avia-button-wrap divs are already set to “display: inline-block” by the theme.

    However, I also created a custom page layout using template-builder.php as a basis and all works fine, except for these in-line buttons.
    When I use this custom page template, a <br> element gets inserted between the buttons, making them appear underneath each other.
    When I switch back to the standard template, the buttons show correctly.

    I have no idea where this <br> is coming from, as it isn’t there with the standard template, and I haven’t changed anything to to loop in the custom template.

    Any ideas?

    December 20, 2015 at 3:53 am #555509
    Elliott

    Hey Kahaa!

    Maybe we could hide it via CSS. Send us a link to your page and we’ll take a look. You can set your reply as private if you wish.

    Cheers!
    Elliott

    December 20, 2015 at 1:37 pm #555584
    Kahaa

    Hi Elliot,

    Thank you for your swift reply.
    The site hasn’t been launched yet and is still on a development environment, but I’ll send you the link.

    I’ve managed to find a workaround by activating the development view in the editor and adding HTML comment tags <!– –> in between the button shortcodes.

    However, each time I change something in the button menu, the comment tags disappear and I have to add them again. A bit cumbersome and not workable when my client starts editing the content himself. So any other more permanent solution would be most welcome.

    Thanks,
    Kristoff

    December 21, 2015 at 8:04 am #555790
    Rikard

    Hi Kristoff,

    Please try the following CSS to see if you have any luck with it: 

    .page-id-479 .flex_column br {
display:none !important;
}

    Best regards,
    Rikard

    December 21, 2015 at 10:54 am #555839
    Kahaa

    Hi Rikard,

    Thank you for the hint. It never occurred to me that ‘display: none’ would also remove the line break behavior.
    Super tip! However, this line of CSS also removes all other -intentional- breaks on that page, and is limited to that page only.

    However, you pointed me in the right direction and I modified the CSS rule to apply only to the menu by using the custom class that I had on that layout element. So this did the trick:

    .magma-on-page-menu br {
display:none !important;
}

    Thanks again and best regards,

    Kristoff

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Inline buttons on custom page template’ is closed to new replies.