Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 24, 2016 at 2:20 am #637199
    xuamox

    Hi,

    I am building a custom form, that has sub-headings. For the sub-headings I am using Custom HTML form elements, and giving the sub-headings an H4 tag. I also gave my form a custom css name. So I am trying to add margin-top to my element using employment-form .av-form-text:

    <div id="avia_2_1" class="av-form-text"><h4>Personal Information</h4>
</div>

    This works on first sub-heading, but not on the second, so I am a bit confused by that.

    Thanks for your help

    May 24, 2016 at 4:14 pm #637577
    Yigit

    Hey xuamox,

    You can target your H4 tag using following code in Quick CSS

    .employment-form h4 { color: orange !important; font-size: 20px !important; }

    If that does not help, please elaborate on the changes you would like to make as i am not sure if i understood you clearly :)

    Best regards,
    Yigit

    May 24, 2016 at 6:08 pm #637681
    xuamox

    Hi Yigit,

    Thanks for your quick response.

    If you check out the form using the previous link that i sent you, you can see the first sub-heading is called “personal information” – it uses an h4 tag. I want about 30px of margin-top on that element. When I try and add margin-top to h4, it doesn’t even move until I am at 150px, but that only affects the first h4, the second sub-heading using an h4 tag does not move at all. This is what is throwing me off.

    .employment-form h4 {
    margin-top: 150px !important;
}

    My second sub-heading is not affected at all

    <div id="avia_12_1" class="av-form-text"><h4>Previous Employment History</h4>
</div>

    I also noticed that on mobile, the form looks great, and the sub-headings are spaced out correctly, by default. I want to achieve the same look for desktop.

    Thanks

    • This reply was modified 8 years, 7 months ago by xuamox.
    May 26, 2016 at 5:09 am #638443
    Rikard

    Hi,

    I see what you mean, I get the same results. Could you try putting margins on the paragraphs instead maybe?

    .employment-form p {
margin-bottom:40px !important;
}

    Thanks,
    Rikard

    January 17, 2017 at 9:20 pm #734978
    xuamox

    I ended up using wpforms as they offer a lot more options for customization and integration. thanks.

    January 17, 2017 at 9:28 pm #734985
    Basilis

    Hi!

    Thanks a lot for letting us know, we do appreciate it.
    Please feel free to create a new ticket, if you need anything else from us.

    Thank you very much

    Cheers!
    Basilis

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Enfold Form – Spacing for Custom HTML elements’ is closed to new replies.