Issue with two elements on a form overlapping on small screens

  • Profile Image
    FreedomSolar
    Asked on October 24, 2017 at 09:11 AM

    I have a form with a page break that uses the GeoComplete widget on page one, with the "next page" button below it. When I preview the form on small screens, the widget and button overlap on what looks like the same line. It looks fine on larger screens.

  • Profile Image
    lumiardian
    Answered on October 24, 2017 at 10:03 AM

    Please put this CSS Code in Custom CSS in order to fix the issue.

    @media (max-width:1024px){

    #id_21 {

        margin-bottom: 0 !important;

    }


    #cid_23 div.form-pagebreak-next-container {

        margin-top: 0 !important;

    }


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

        width: 50% !important;

        margin: 0 auto !important;

        display: block !important;

    }


    .geoComplete{

    width: 100% !important;

    }

    }

    In this link you can find user guides on how to add CSS code into forms.