-
Posts
-
Hi,
For some reason, my footer is taking up too much space. If there is very little content above in the content section, the footer will get longer to fill up the space. Why is this happening and what can I do? Help!
Thank you,
Catherine
Kent CommunicationsHey Thomas,
I tried logging in with the login credetials you gave, however it doesn’t work, please check.
I think the contact form inside the footer is causing that space, or are you referring on top and bottom space in the footer?Best regards,
NikkoHi Nikko,
Sorry about that. The log in address is https://arthurriggs.com/wp-admin
Credentials are in the Private Content
I am not a programmer, so I copied the html from the Contact form and placed it inside the 2nd column widget. Additionally, after researching on the Forum, I am attempting to create 2 columns in the footer, each column taking up half, with the Contact Form in the 2nd (right hand) column. The following code has been added to Quick css:/* Full width footer */
#footer .container {
width: 100vw;
max-width: 100%!important;
}#footer div .av_one_half:nth-child(1) { width: 45%; }
#footer div .av_one_half:nth-child(2) { width: 45%; }
The problem seems to be the area where a 4th column would be. I can not extend a column into this area.
Hi Catherine,
I see, thanks for giving us admin access.
I have added this css code in Quick CSS, located in Enfold > General Styling:#top #custom_html-2 { margin-bottom: 0; } #top #custom_html-2 .avia-builder-el-2 { margin: 0; } #top #custom_html-2 .avia_ajax_form, #top #custom_html-2 .avia_ajax_form fieldset { margin-bottom: 0; } #top #custom_html-2 .avia-builder-el-2 .form_element { margin-bottom: 0; } #top #custom_html-2 .avia-builder-el-2 .form_element .text_input { padding-top: 6px; padding-bottom: 6px; } #top #custom_html-2 .avia-builder-el-2 .form_element .text_area { padding-top: 6px; padding-bottom: 6px; height: 40px; } #top #custom_html-2 .avia-builder-el-2 .form_element .button { border: 2px solid; padding-top: 7px; padding-bottom: 7px; } #top .av-custom-form-color .button { border: 2px solid; padding: 7px 12px; }It can still be compressed if we remove labels and use placeholders instead. Placeholders are text within the text field which is removed once you click over the text field.
Best regards,
NikkoHi! Thank you, I think that made my footer smaller. When you refer to labels, do you mean in the contact form? I would actually like the contact form to take up 1/3 of the width of the footer – can you help me with that?
Hi tomkent2005,
You’re welcome. :)
For the footer width, go to Enfold > Footer > Footer Columns > set this to 3.
As for the labels, I meant those Name, Email, if you set it as placeholder, you’ll have a contact form just like: https://kriesi.at/themes/enfold-2017/pages/contact/ where Name, E-mail are inside the textfield not outside which also lessen the height.Best regards,
NikkoWell, so the contact form currently takes up 1/4 of the width. When I change it to 3 columns, it doesn’t seem to change the width of the contact form – it just adds more random content (that I am not controlling) to either side.
Also – what does this mean? —-
Your theme has 3 other widget areas, but this particular page doesn’t display them.
You can navigate to other pages on your site while using the Customizer to view and edit the widgets displayed on those pages.
Can you take a look at my coding for the contact form and see if there is something wrong? Or a way to make it WIDER? Thank you.
<p><div class=”flex_column av_one_half flex_column_div av-zero-column-padding first avia-builder-el-2 el_after_av_textblock el_before_av_one_half column-top-margin” style=’background: #232b30; border-width:10px; border-color:#232b30; border-style:solid; background-color:#232b30; border-radius:0px; ‘><form action=”http://arthurriggs.com/contact/” method=”post” class=”avia_ajax_form av-form-labels-visible avia-builder-el-3 avia-builder-el-no-sibling av-custom-form-color av-light-form ” data-avia-form-id=”1″ data-avia-redirect=”><fieldset><h3>How Can We Help?</h3><p class=’ first_form form_element form_element_half’ id=’element_avia_1_1′><label for=”avia_1_1″>Name <abbr class=”required” title=”required”>*</abbr></label> <input name=”avia_1_1″ class=”text_input is_empty” type=”text” id=”avia_1_1″ value=”” /></p><p class=’ form_element form_element_half’ id=’element_avia_2_1′><label for=”avia_2_1″>E-Mail <abbr class=”required” title=”required”>*</abbr></label> <input name=”avia_2_1″ class=”text_input is_email” type=”text” id=”avia_2_1″ value=”” /></p><p class=’ first_form form_element form_element_half’ id=’element_avia_3_1′><label for=”avia_3_1″>Subject <abbr class=”required” title=”required”>*</abbr></label> <input name=”avia_3_1″ class=”text_input is_empty” type=”text” id=”avia_3_1″ value=”” /></p><p class=’ first_form form_element form_fullwidth av-last-visible-form-element’ id=’element_avia_4_1′> <label for=”avia_4_1″ class=”textare_label hidden textare_label_avia_4_1″>Message <abbr class=”required” title=”required”>*</abbr></label> <textarea name=”avia_4_1″ class=”text_area is_empty” cols=”40″ rows=”7″ id=”avia_4_1″ ></textarea></p><p class=”hidden”><input type=”text” name=”avia_5_1″ class=”hidden ” id=”avia_5_1″ value=”” /></p><p class=”form_element “><input type=”hidden” value=”1″ name=”avia_generated_form1″ /><input type=”submit” value=”Send” class=”button” data-sending-label=”Sending”/></p></fieldset></form><div id=”ajaxresponse_1″ class=”ajaxresponse ajaxresponse_1 hidden”></div></div>
<div class=”flex_column av_one_half flex_column_div av-zero-column-padding avia-builder-el-4 el_after_av_one_half avia-builder-el-last column-top-margin” style=’border-radius:0px; ‘></div></p>Hi,
Why did you extract the form’s html code? You can use the contact form shortcode instead. Example:
[av_contact email=' (Email address hidden if logged out) ' title='Send us mail' button='Submit' on_send='' sent='Your message has been sent!' link='' subject='' autoresponder_email=' (Email address hidden if logged out) ' autorespond='' captcha='' hide_labels='' form_align='' color='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av_uid=''] [av_contact_field label='Name' type='text' check='is_empty'][/av_contact_field] [av_contact_field label='E-Mail' type='text' check='is_email' width='element_half']][/av_contact_field] [av_contact_field label='Subject' type='text' check='is_empty'][/av_contact_field] [av_contact_field label='Message' type='textarea' check='is_empty'][/av_contact_field] [/av_contact]The av_contact_field items are set to “fullwidth” by default. If you want to control the size of the fields, just add the “width” parameter. Example:
[av_contact_field label='E-Mail' type='text' check='is_email' width='element_half']][/av_contact_field]If you really need to use the html, just remove the input’s “form_element_half” class attribute to make it full width.
<p class=’ form_element form_element_half’ id=’element_avia_2_1′>Best regards,
IsmaelHi, thank you.
I actually changed the width and it works.
How do I add a captcha part? I tried and it is unsuccessful in displaying the number.
Here is the site address:Here is the coding I used – I added it to Enfold theme, “general styling” then Quick CSS at the bottom.
Thank you.
Also – I have another question – how do I change the color of the titles in my footer? Everything I have tried so far has not worked.
Thank you.
- You must be logged in to reply to this topic.