-
AuthorPosts
-
February 23, 2016 at 6:11 pm #587862
Hi, how can I center the whole contact form on a page?
Right now I can set the width for each input field but not for the submit button (but thats not the question).So I have 2 input fields and one submit button. Both fields have 1/4 width and I fixed the button width with some CSS code. But the whole form is aligned on the left side of the page.
Thanks, Enrico
February 23, 2016 at 6:38 pm #587879Hello,
To center the whole contact form on a page:
1st method: Go to the page where you create the contact page. Now, on the Avia Layout Builder > Layout Elements > select one single column 1/5, one single column 3/5 and one single column 1/5 with that order. Finally, put your form on single column 3/5 and the whole form now is in center.
2nd method: Try to set margin-left until the form is in center. Put that code on enfold theme Quick Css or on a custom css plugin.
form.avia_ajax_form.av-form-labels-visible.avia-builder-el-1.el_after_av_blog.avia-builder-el-last { margin-left: 225px; }
February 23, 2016 at 6:47 pm #587887Thanks for reply. Both methods are not really good working, because its never really centered.
I’ve 3 form elements. The input fields have both the same width. The submit button has just the width of the text (modified with CSS code). So I can’t get it centered by the 1st method.
The 2nd method wont work when you start to scale the page window.
Is there any other option?
Thanks, Enrico
February 23, 2016 at 7:49 pm #587917Hi,
Can you post the link to your website please?
Regards,
JosueFebruary 23, 2016 at 8:04 pm #587932Sure, the link below. The form is on the bottom of the side.
February 23, 2016 at 8:55 pm #587961Hm, is that the correct URL? your site is not loading for me:
ERR_CONNECTION_TIMED_OUT
February 24, 2016 at 8:09 am #588203The URL is correct. Can you try again please? Maybe the server was down.
February 24, 2016 at 1:55 pm #588350Hello,
try that, and the form now is in center. Also, in responsive size (tablet, smartphones, laptops) again the form is in center:
Put that code on enfold theme Quick Css or on a custom css plugin.
1st step: To modify the button size, change only the width percent of that class:
.modified_width .button { width: 50%; }
2nd step: To center form in a page, put that code:
fieldset { margin: 0px auto; }
February 24, 2016 at 2:08 pm #588360Thanks for your answer, but this doesn’t do any change on the appearance.
Do you have any other idea?February 24, 2016 at 2:12 pm #588366Post your site link to see that if you want.
February 24, 2016 at 2:14 pm #588371Hi!
Glad you got it short out.
Please do let us know if you need anything else, we will be more than happy to assistCheers!
BasilisFebruary 24, 2016 at 2:23 pm #588382the temporary site link is http://nacktbesseraussehen.tradercompany.net/.
The form is at the bottom.February 24, 2016 at 3:13 pm #588416Try that code but not the best for responsive (Laptop, Tablet, Smartphones) devices.
.flex_column.av_one_full.av-animated-generic.pop-up.flex_column_div.av-zero-column-padding.first.avia-builder-el-15.el_after_av_textblock.avia-builder-el-last.column-top-margin.avia_start_animation.avia_start_delayed_animation { margin-left: 130px; }
To modify that code to set entirely in the center for responsive device, you need to put some Media Queries for Standard Devices.
February 24, 2016 at 3:36 pm #588424Thanks for help, but thats not what I need. I don’t wanna align the form by using a margin (for the same reason you mentioned).
Does anybody else have another idea?February 24, 2016 at 10:01 pm #588655Hi!
Use the following:
#top .avia_ajax_form fieldset p { display: inline-block; width: auto !important; float: none; } #top .avia_ajax_form fieldset p .text_input{ min-width: 320px; } #top .avia_ajax_form fieldset{ text-align: center; }
Regards,
JosueFebruary 25, 2016 at 5:09 pm #589262Hello Josue,
thanks, that helped :) Now its working :)
regards, EnricoFebruary 25, 2016 at 5:15 pm #589265You are welcome, glad to help :)
Regards,
Josue -
AuthorPosts
- You must be logged in to reply to this topic.