Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 5, 2018 at 8:02 pm #1006294
    daniur

    I need a Contact From smaller and more compact.

    I’ve managed to make the fields smallers through custom CSS. But I’d like to re-arrange the fields to have an even more compact design.

    I’ve attached an screenshot of I would like to perform, can you please help me to arrange the fields so they look something like this:

    View post on imgur.com

    Many thanks! :)

    • This topic was modified 6 years, 2 months ago by daniur.
    September 6, 2018 at 4:32 am #1006420
    Ismael

    Hey daniur,

    Thank you for using Enfold.

    We need to inspect the actual contact form. Please provide the link to the page.

    Best regards,
    Ismael

    September 6, 2018 at 12:46 pm #1006561
    daniur

    Hi Ismael,

    Sure, I’ve sent you the link to the page on the private content field.

    The actual contact form is at the bottom of the page, just before the footer section. I would like to re-design it so it looks like the one I’ve attached earlier in my previous message.

    Thanks for your support! :)

    • This reply was modified 6 years, 2 months ago by daniur.
    September 6, 2018 at 1:03 pm #1006573
    Dude

    Hi!

    Please try this css code:

    
#top.page-id-966 #wrap_all .avia_ajax_form .form_element_third {
float: left;
clear: both !important;
margin: 0;
}

#top.page-id-966 #wrap_all .avia_ajax_form .form_fullwidth {
float: right;
width: 65%;
clear: inherit;
min-height: 120px;
margin-top: -60px;
}

    Cheers!
    Peter

    September 7, 2018 at 1:02 am #1006851
    daniur

    Hi Peter!
    Thanks for your great help.

    Yes with this css it gets closer for what I need, but I had to put another value for the margin-top to -100px otherwise it was disaligned from the left fields.
    I guess depending on the screen that field will have to be with a different value, will test tomorrow with more screens.

    Another problem I come to is that on mobile devices this solution it doesn’t work this css code, as it overlaps the .text_field on top on the other fields and looks quite messy.

    For other, if I remove the margin-top line, on mobile it looks some sort of more decent, but totally disaligned on the computer browser.

    View post on imgur.com

    Will keep trying but I don’t think this will have an easy solution, if you think of any other solution please let me know, many thanks.

    • This reply was modified 6 years, 2 months ago by daniur.
    September 7, 2018 at 7:43 am #1006945
    Dude

    Hi,

    You could use media queries ( https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ and https://www.w3schools.com/css/css_rwd_mediaqueries.asp ) to set different css rules for different devices/screen sizes. I.e. I’d recommend to set the width of all fields to 100% on smaller screens like:

    
@media only screen and (max-width: 768px) {
#top.page-id-966 #wrap_all .avia_ajax_form .form_fullwidth, #top.page-id-966 #wrap_all .avia_ajax_form .form_element_third  {
float: none;
width: 100%;
clear: both;
display: block;
}
}

    Best regards,
    Peter

    September 9, 2018 at 7:44 pm #1007665
    daniur

    Hi Peter,
    Thanks for your help, I’ve managed to get something close to what I wanted with both your instructions.

    Thanks again! :)

    September 10, 2018 at 2:36 am #1007735
    Ismael

    Hi,

    Great! Glad we could help!

    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    Don’t forget to bookmark Enfold Documentation for future reference.

    Thank you for using Enfold :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Rearrange Contact Form Fields’ is closed to new replies.