Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 26, 2018 at 8:27 pm #1002003
    Archie

    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.
    August 27, 2018 at 6:05 am #1002135
    Ismael

    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

    August 27, 2018 at 12:49 pm #1002247
    Archie

    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.
    August 27, 2018 at 4:15 pm #1002339
    Vinay

    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

    August 28, 2018 at 1:02 pm #1002661
    Archie

    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!

    August 28, 2018 at 3:52 pm #1002735
    Nikko

    Hi Archie,

    Please add this css code:

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

    Hope it helps :)

    Best regards,
    Nikko

    August 28, 2018 at 4:57 pm #1002761
    Archie

    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!

    August 29, 2018 at 7:01 am #1003007
    Ismael

    Hi,

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

    Best regards,
    Ismael

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