Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • #1050869

    Hello,

    I’m having a problem with my contact form on mobile.

    It doesn’t behave responsively and therefore some portions of the input field descriptions and the send button are not visible.

    Please check with a smartphone -> http://www.nothdurfter.net

    Thanks for your help in advance.

    #1051215

    Hey HitIt2014,

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

    @media only screen and (max-width: 767px) {
    .home .avia_ajax_form p {
        width: 85%;
    }
    }

    Best regards,
    Rikard

    #1051325

    Thanks for the reply Rikard,

    unfortunately it doesn’t seem to work. :-(

    Any other ideas?

    #1051647

    Hi,

    Please try this instead:

    @media only screen and (max-width: 767px) {
    .home .avia_ajax_form p {
        width: 85% !important;
    }
    }

    Also make sure to delete the old CSS/JS files under Enfold->Performance. If it still doesn’t apply then try to disable file compression in the same place.

    Best regards,
    Rikard

    #1051710

    Hi,

    with this it improved a little bit. Now text is at least broken up into multiple lines if necessary. Yet some words still aren’t completely visible. And the text on the button doesn’t wrap properly either. :-(

    Any other ideas?

    Thanks

    #1051713

    Oh and by the way: I had to reduce width to less than 85% (it’s now at 50%) to see results. Setting it even lower did not make for better line breaks though. And I’m worried that it’ll now look weird on devices slightly larger than your average smartphone but not quite as large as a tablet (like the bigger iPhone or Samsung phones). :-(

    #1052599

    Hi,

    Set the p tag width to 100%:

    .home .avia_ajax_form p {
        width: 100% !important;
    }

    … and then add this css code:

    #top fieldset {
        width: 100%;
        min-inline-size: auto;
    }

    Best regards,
    Ismael

    #1053134

    Still no luck. :-(

    Here’s a screenshot after making the above mentioned changes.

    Screenshot in Dropbox

    • This reply was modified 6 months, 1 week ago by  HitIt2014. Reason: Typo
    #1053472

    Hi,

    Thanks for the update. Please post the login details in the private field. And make sure that the Appearance > Editor panel is accessible.

    Best regards,
    Ismael

    #1056716

    Thanks Ismael,

    I posted login credentials in the private content area.

    #1056800

    Hi HitIt2014,

    https://cl.ly/f74ad5bfd5f0 This code seems to be causing the issue. You might need to remove it or limit it.

    Best regards,
    Victoria

    #1056826

    Hi Victoria,

    you colleague Ismael recommended I put in this specific piece of code… Now I’m a bit confused as you can imagine. ;-)

    #1057179

    Hi HitIt2014,

    Well, maybe, but using !important is not a good thing in this case.

    Please try adding this code:

    
    @media only screen and (max-width:990px){
        .avia-safari .home .avia_ajax_form p {
            width: 85vw !important;
        }
    }
    

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #1058912

    Thank you Victoria, looks like it’s now working for the input field descriptions as well as the fields themselves. :-)

    Can I add something to the code so that the button will also be affected?

    What des the “vw” in the code above actually do? :-)

    Thanks again!

    #1060177

    Hi HitIt2014,

    The “vw” means view width.

    Please use the course like this:

    
    @media only screen and (max-width:990px) {
        .avia-safari .home .avia_ajax_form p {
            width: 85vw !important;
        }
        .avia-safari .home .avia_ajax_form p input[type=submit] {
            width: 80vw;
        }
    }
    

    Best regards,
    Victoria

    #1060598

    Thanks Victoria!

    Now the button is the correct size on mobile but the text on the button is cut off (instead of a line break). :-(

    Any suggestions to fix this?

    #1061286

    Hi HitIt2014,

    Try the code like this:

    
    @media only screen and (max-width: 990px) {
        .avia-safari .home .avia_ajax_form p input[type=submit] {
            width: 80vw;
            white-space: pre-wrap;
        }
    }

    Best regards,
    Victoria

    #1061656

    Looks like it’s working!! :-)

    Thanks so much for your help Victoria!

    #1062136

    Hi,

    Great, I’m glad Victoria could help you out. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    #1062781

    Thanks, no further help required. If possible keep this thread online for future reference.

    #1062804

    Hi HitIt2014,

    Yes, this thread will be kept online.
    Glad that everything is working fine :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

Viewing 21 posts - 1 through 21 (of 21 total)

You must be logged in to reply to this topic.