Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1002003

    Hi Enfold Team!

    I’m not sure if this is do-able, but do you have any recommendations/tips on how to achieve this look/design?

    I’m trying to copy this design:

    On this website:
    https://superior.archiealibasa.com/
    Any help would be appreciated! Thank you!

    • This topic was modified 6 years, 2 months ago by Archie.
    #1002135

    Hey Archie,

    Thank you for using Enfold.

    Are you referring to the form? Please turn on the custom css class field, add a unique class attribute to the column containing the form (eg: “custom-column”) and then use the following css codes.

    // https://kriesi.at/documentation/enfold/intro-to-advanced-layout-builder/#turn-on-custom-css-class-field-for-all-alb-elements

    @media only screen and (min-width: 768px) {
    #top .custom-column {
        position: absolute;
        bottom: 0;
        width: 80%;
        height: 200px;
        left: 50%;
        transform: translateX(-50%);
        margin-left: 0;
    }
    
    #top .custom-column .avia_ajax_form .form_element, #top .custom-column .avia_ajax_form .form_element.first_form {
        width: 18%;
        float: left;
        clear: none;
        margin-right: 1%;
    }
    }

    Let us know if it helps.

    Best regards,
    Ismael

    #1002247

    Hi Ismael!

    Thank you for your reply. Yes, sorry I forgot to indicate that I am trying to copy the layout of the form based on the design they sent me.

    I implemented your solution and here’s what I have at the moment:

    Any change we can fix the submit button alignment?

    You are awesome thanks!

    • This reply was modified 6 years, 2 months ago by Archie.
    #1002339

    Hi,

    I have added the below CSS to Quick CSS section.
    Please refresh the cache and review your site:

    #top .custom-column form {
        margin-bottom: 20px;
        display: flex;
        justify-content: space-around;
    }
    
    #top .custom-column fieldset {
        width: 100%;
    }
    
    .custom-column .avia_ajax_form .button {
        width: 100%;
        margin-top: 29px;
    }

    Best regards,
    Vinay

    #1002661

    Thank you so much Vinay! This is great!

    One last thing, can we fix the spacing between “Name” and “Phone” so that it is uniform with the others?

    Than youuu! You guys are awesome!

    #1002735

    Hi Archie,

    Please add this css code:

    #top .avia_ajax_form .form_element_half {
        margin-left: 0;
    }

    Hope it helps :)

    Best regards,
    Nikko

    #1002761

    This is perfect Nikko! Thank you so much!

    Lastly, can we fix the submit button’s right padding so that it is the same as the left padding of the name section?

    Thank you!

    #1003007

    Hi,

    Adjust the width of the form element container from 18% to 19%.

    Best regards,
    Ismael

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