Buttons not good visible/form not responsive

  • Profile Image
    timbroer
    Asked on July 31, 2017 at 03:40 AM

    Hi, 

    I have problem with my form.  The buttons on the bottom of the page aren't (good) visible.

    https://royalbrinkman.nl/promotie/folie-configurator 

    Can you help me to solve this problem?

    Thank you in advance!

  • Profile Image
    Charlie
    Answered on July 31, 2017 at 06:35 AM

    Hi,

    The form itself is actually responsive. The problem in the next and back button is that the text you set is too long. Note that the buttons takes 50% of the width on mobile devices. 

    If you want the text in the buttons to adjust or wrap properly. Please try adding this custom CSS code inside the @media rule block:

    .form-all .form-pagebreak-back, .form-all .form-pagebreak-next {

      overflow-wrap: break-word !important;

    }

     

    Let us know if that works.

  • Profile Image
    timbroer
    Answered on July 31, 2017 at 08:10 AM

    I have shortened the text in the buttons. But the buttons at the bottom of the page are not shown properly. When I add CSS code, then the form is not responsive anymore.

    .form-all .form-pagebreak-back, .form-all .form-pagebreak-next {

      overflow-wrap: break-word !important;

    }

     

     

     

     

    https://royalbrinkman.nl/promotie/folie-configurator

  • Profile Image
    denizg
    Answered on July 31, 2017 at 11:51 AM

    You should remove the following codes. Because this codes limits the form with specific size (700px). So, there are some issues on mobile. While testing on iphone, the following part of email field does not be shown because of css restriction.

    you should add your code instead to solve this problem.

  • Profile Image
    John_Benson
    Answered on July 31, 2017 at 02:46 PM

    If the issue still persists, please try adding this Custom CSS Code to your form:

    .tabs-list.electricred li {

        padding: 5px;

    }

    To add a Custom CSS Code to your form, please follow this guide: 

    Here's the result:

    I hope that helps. If you need further assistance, please let us know.

     

  • Profile Image
    timbroer
    Answered on August 01, 2017 at 03:44 AM

    Thanks for your help. 

    I have addes both codes, but the form is now no longer responsive on mobile.

     

     

    Do you have any tips?

  • Profile Image
    Chriistian
    Answered on August 01, 2017 at 04:42 AM

    Could you please try to add the two codes provided inside the following @media query rule block?

    @media only screen and (max-width: 40em){}

     

    So for example:

     

    @media only screen and (max-width: 40em){

    .form-all .form-pagebreak-back, .form-all .form-pagebreak-next {

      overflow-wrap: break-word !important;

    }

    .tabs-list.electricred li {

        padding: 5px;

    }

    }

     

    Hope this helps.