Avada › Forums › Community Forum › 100% Width Button?

Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • Exaltare
    Participant
    October 29, 2018 at 4:29 am
    Post count: 18
    #532211

    I cannot find the option for a 100% width button as featured here: https://avada.theme-fusion.com/buttons/

    Am I missing it in the settings somewhere?

    Michael
    Keymaster
    October 29, 2018 at 12:34 pm
    Post count: 752
    #532358

    Hi @exaltare

    Edit the Button Element’s design settings and enable the 100% span here -> https://d.pr/i/cfRAFc

    If you need further assistance or have any further questions, please create a support ticket using the link below and our support team will gladly assist you

    Click Here To Get Avada Support

    We look forward to helping you!

    Thank you kindly

    Exaltare
    Participant
    November 1, 2018 at 12:54 am
    Post count: 18
    #533875

    I understand how to make the button full width. I’m looking to change the height to match what is in the demo and I can’t seem to find that option.

    Michael
    Keymaster
    November 1, 2018 at 11:21 am
    Post count: 752
    #533952

    Hi @exaltare

    Here is a copy of the 100% width button from that demo page, add it to your page and check the settings:

    [fusion_builder_column type="1_1" layout="1_1" background_position="left top" background_color="" border_size="" border_color="" border_style="solid" spacing="yes" background_image="" background_repeat="no-repeat" padding_top="" padding_right="" padding_bottom="" padding_left="" margin_top="0px" margin_bottom="0px" class="" id="" animation_type="" animation_speed="0.3" animation_direction="left" hide_on_mobile="no" center_content="no" min_height="none" last="no" hover_type="none" link="" border_position="all"][fusion_button link="/test" target="_blank" hide_on_mobile="small-visibility,medium-visibility,large-visibility" class="customButton" color="default" size="xlarge" stretch="yes" shape="square" icon_position="left" icon_divider="no" animation_direction="left" animation_speed="1.0"]100% Width Button![/fusion_button][/fusion_builder_column]

    Thank you kindly

    Exaltare
    Participant
    November 1, 2018 at 11:43 pm
    Post count: 18
    #534202

    I submitted a ticket. They were kind enough to give me the custom CSS but even after adding the custom CSS, making sure the page was set to 100%, and adding the class to the element in the Fusion Builder, nothing changes.

    .customButton {
    padding: 90px;
    font-size: 26px;
    font-weight: 400 !important;
}
    Michael C
    Keymaster
    November 2, 2018 at 1:39 pm
    Post count: 549
    #534459

    Hi @Exaltare

    You already have an open support ticket so please do not post the same question in multiple places. Also, please be more specific in your query. First you say you don’t know how to set the 100% width, then you say it is really the height that is the problem. Its unclear as to which aspect of the button you were originally enquiring about.

    To summarize the set-up for an edge to edge 100% width button:
    1. For content going edge to edge the page template needs to be 100% width.
    2. The container Interior Content Width set to 100% width and have its left and right padding set to 0px.
    3. The button should have Button Span set to yes.

    For the button height, that comes from whatever button size you select in the button element.
    If you need it to be taller than the preset then you can use custom CSS like the CSS already posted:
    1. Add the class to your button element – http://prntscr.com/ldk6iw
    2. Add the CSS to Theme Options > Custom CSS – http://prntscr.com/ldk770

    foubrak
    Participant
    January 13, 2019 at 5:22 am
    Post count: 3
    #562804

    Important > Page 100% width
    Container > 100% width

    Here de code for CSS:

    /* CTA BUTTON */
    .cta-button{padding:75px 0;border:none;}

    foubrak
    Participant
    January 13, 2019 at 5:23 am
    Post count: 3
    #562805

    Important > Page 100% width
    Container > 100% width

    Code for CSS:

    /* CTA BUTTON */
    .cta-button{padding:75px 0;border:none;}

    marina1964
    Participant
    July 29, 2019 at 1:29 am
    Post count: 7
    #634215

    None of these work for me.

    marina1964
    Participant
    July 29, 2019 at 1:36 am
    Post count: 7
    #634216

    An optimization plugin makes it not work (Autoptimize).

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.