Avada › Forums › Community Forum › 100% Width Button?
Tagged: button element
-
AuthorPosts
-
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?
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
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.
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
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; }
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/ldk770Important > Page 100% width
Container > 100% widthHere de code for CSS:
/* CTA BUTTON */
.cta-button{padding:75px 0;border:none;}Important > Page 100% width
Container > 100% widthCode for CSS:
/* CTA BUTTON */
.cta-button{padding:75px 0;border:none;}None of these work for me.
An optimization plugin makes it not work (Autoptimize).
-
AuthorPosts
- You must be logged in to reply to this topic.