Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #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

    #587879

    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;
    }
    #587887

    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

    #587917

    Hi,

    Can you post the link to your website please?

    Regards,
    Josue

    #587932

    Sure, the link below. The form is on the bottom of the side.

    #587961

    Hm, is that the correct URL? your site is not loading for me:

    ERR_CONNECTION_TIMED_OUT
    
    #588203

    The URL is correct. Can you try again please? Maybe the server was down.

    #588350

    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;
    }
    #588360

    Thanks for your answer, but this doesn’t do any change on the appearance.
    Do you have any other idea?

    #588366

    Post your site link to see that if you want.

    #588371

    Hi!

    Glad you got it short out.
    Please do let us know if you need anything else, we will be more than happy to assist

    Cheers!
    Basilis

    #588382

    the temporary site link is http://nacktbesseraussehen.tradercompany.net/.
    The form is at the bottom.

    #588416

    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.

    #588424

    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?

    #588655

    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

    #589262

    Hello Josue,
    thanks, that helped :) Now its working :)
    regards, Enrico

    #589265

    You are welcome, glad to help :)

    Regards,
    Josue

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