-
Posts
-
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
Hello,
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; }Thanks 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
Hello,
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; }Thanks for your answer, but this doesn’t do any change on the appearance.
Do you have any other idea?Hi!
Glad you got it short out.
Please do let us know if you need anything else, we will be more than happy to assistCheers!
Basilisthe temporary site link is http://nacktbesseraussehen.tradercompany.net/.
The form is at the bottom.Try 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.
Thanks 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?Hi!
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,
Josue
- You must be logged in to reply to this topic.