Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • January 7, 2019 at 1:38 pm #1050869
    HitIt2014

    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.

    January 8, 2019 at 6:37 am #1051215
    Rikard

    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

    January 8, 2019 at 11:15 am #1051325
    HitIt2014

    Thanks for the reply Rikard,

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

    Any other ideas?

    January 9, 2019 at 9:15 am #1051647
    Rikard

    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

    January 9, 2019 at 10:56 am #1051710
    HitIt2014

    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

    January 9, 2019 at 10:58 am #1051713
    HitIt2014

    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). :-(

    January 11, 2019 at 7:10 am #1052599
    Ismael

    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

    January 12, 2019 at 3:40 pm #1053134
    HitIt2014

    Still no luck. :-(

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

    Screenshot in Dropbox

    • This reply was modified 5 years, 10 months ago by HitIt2014. Reason: Typo
    January 14, 2019 at 1:24 am #1053472
    Ismael

    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

    January 21, 2019 at 3:13 pm #1056716
    HitIt2014

    Thanks Ismael,

    I posted login credentials in the private content area.

    January 21, 2019 at 5:05 pm #1056800
    Victoria

    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

    January 21, 2019 at 5:42 pm #1056826
    HitIt2014

    Hi Victoria,

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

    January 22, 2019 at 1:27 pm #1057179
    Victoria

    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

    January 25, 2019 at 8:45 pm #1058912
    HitIt2014

    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!

    January 29, 2019 at 9:15 pm #1060177
    Victoria

    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

    January 30, 2019 at 8:21 pm #1060598
    HitIt2014

    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?

    January 31, 2019 at 10:46 pm #1061286
    Victoria

    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

    February 1, 2019 at 6:41 pm #1061656
    HitIt2014

    Looks like it’s working!! :-)

    Thanks so much for your help Victoria!

    February 3, 2019 at 8:54 am #1062136
    Rikard

    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

    February 4, 2019 at 6:40 pm #1062781
    HitIt2014

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

    February 4, 2019 at 7:24 pm #1062804
    Nikko

    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

  • Author
    Posts
Viewing 21 posts - 1 through 21 (of 21 total)
  • You must be logged in to reply to this topic.