Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • October 25, 2023 at 2:25 pm #1423690
    YourChoice Informatik GmbH

    Hi
    On all our previous websites, the Enfold contact forms were always responsive.
    But on a website we are implementing, the Enfold contact forms are not responsive, right it cuts off. What is the reason for this?
    Thanks very much.
    Best regards
    Mike

    October 26, 2023 at 11:14 am #1423761
    Rikard

    Hey Michael,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 400px) {
#top .avia_ajax_form .text_input {
    width: 90%;
    display: table;
    margin: 0 auto;
}
}

    Best regards,
    Rikard

    October 27, 2023 at 8:39 am #1423881
    YourChoice Informatik GmbH

    Hi Rikard
    Thanks for the CSS code. We tryed it out but the contactc form still are not responsiv.
    By the way. Why the contact forms are not responsive on this website and on all our other website they are?
    Best regards
    Mike

    October 29, 2023 at 2:02 pm #1424013
    Mike

    Hi,
    The issue seems to be that the google badge message on your form has a min width of 300px and on very small screens this is too large.
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (max-width: 400px) {
#top .avia_ajax_form .av-google-badge-message {
    min-width: 100%;
}
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    October 30, 2023 at 12:52 pm #1424121
    YourChoice Informatik GmbH

    Hi Mike
    Thanks very much for the CSS code.
    With this code the forms are responsive.
    But one question I still have. Why we have to use this CSS code here? We have a lot of other websites which also have contact forms with this google badge and there this is no problem and it is responsive without this CSS code.
    See some examples in the private content section.
    Best regards
    Mike

    November 1, 2023 at 11:37 am #1424308
    Mike

    Hi,
    Thanks for the feedback, I see the same issue on all three site that you linked to, perhaps you didn’t check them on very small screen sizes, under 400px.
    You could add this css to all of your sites and it would help them also.

    Best regards,
    Mike

    November 1, 2023 at 11:57 am #1424309
    YourChoice Informatik GmbH

    Hi Mike
    Thanks for your response.
    But why we have this issue and need this code?
    Is it because we added this code to functions.php?

    Google links with target _blank

    Perhaps this code is not needed anymore because Enfold now opens this links in new tabs?

    Best regards
    Mike

    November 1, 2023 at 3:40 pm #1424326
    Mike

    Hi,
    I don’t think the issue is related to the code you added to the functions.php, it is because the google badge message has a min width of 300px and on very small screens, this is too large, so the solution is to use the css above.
    Please give this a try.

    Best regards,
    Mike

    November 1, 2023 at 3:46 pm #1424327
    YourChoice Informatik GmbH

    Hi Mike
    Ok, so we will add this to all our websites where we have a contact form with Google reCAPTCHA.
    Is the code in functions.php still needed?
    Best regards
    Mike

    November 1, 2023 at 4:36 pm #1424338
    Mike

    Hi,
    I’m not sure about your functions.php code, it seems to be from 2020, I recommend testing without it.

    Best regards,
    Mike

    November 2, 2023 at 6:42 pm #1424433
    YourChoice Informatik GmbH

    Hi Mike
    I tested it. The code in the functions.php is still needed for that the links of the google badge are opened in a new tab.
    Is that correct that every one who uses this google badge has to use this CSS code for that the forms are responsive?
    Thanks very much.
    Best regards
    Mike

    November 3, 2023 at 4:53 pm #1424558
    Mike

    Hi,
    Yes this is true, due to your customization.

    Best regards,
    Mike

    November 4, 2023 at 3:40 pm #1424642
    YourChoice Informatik GmbH

    Hi Mike
    Ok, thanks for your response.
    Yes, but this customization is needed for that the google links are opened in a new tab.
    But now we have a CSS fix for that, so all is ok ;-)
    You can close this issue.
    Best regards
    Mike

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