-
AuthorPosts
-
August 26, 2018 at 8:27 pm #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, 4 months ago by Archie.
August 27, 2018 at 6:05 am #1002135Hey 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.
@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,
IsmaelAugust 27, 2018 at 12:49 pm #1002247Hi 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, 3 months ago by Archie.
August 27, 2018 at 4:15 pm #1002339Hi,
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,
VinayAugust 28, 2018 at 1:02 pm #1002661Thank 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 #1002735Hi Archie,
Please add this css code:
#top .avia_ajax_form .form_element_half { margin-left: 0; }
Hope it helps :)
Best regards,
NikkoAugust 28, 2018 at 4:57 pm #1002761This 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 -
AuthorPosts
- You must be logged in to reply to this topic.