Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • June 6, 2017 at 1:12 pm #804486
    acadas

    To have the fields more narrow, we use the following CSS code.
    It works fine either on desktop browsers or on mobile devices.
    But not on both, because there is always an offset between checkboxes and the checkbox text.
    We could solve this on desktop browsers with “top: -11px!important;” but then we will have a 11px offset on mobile devices.
    Could you please help?

    #top label {
    margin-top: -15px;
    margin-bottom: 0px;
    }
    #top .avia_ajax_form .text_input, #top .avia_ajax_form .select {
    padding: 8px;
    }
    #top .avia_ajax_form input[type=”checkbox”] {
    top: -11px!important;
    }

    June 7, 2017 at 6:29 am #804845
    Rikard

    Hey Bernd,

    If you want to control the space between the checkbox and the text then you can try to alter this value, which is the default one:

    #top .avia_ajax_form input[type="checkbox"] {
    margin-right: 8px;
}

    Best regards,
    Rikard

    June 7, 2017 at 9:45 am #804964
    acadas

    Hey Rikard,
    this was a missunderstanding. Sorry! I am talking about a vertical offset which occurs on mobile devices.
    Please check the links I habe provided with this service request. You will see that it works fine on Desktop Browsers, but there will be an vertical offset on mobile devices.
    Regards,
    Bernd

    June 7, 2017 at 11:17 am #805020
    acadas

    Hi Rikard,
    please also check the aatached dropbox link.
    Regards,
    Bernd

    June 8, 2017 at 9:30 am #805476
    acadas

    Hi Rikards,
    There is some time preasure on my side, because the site needs to go online.
    Could you be so nice and take care of this support request today?
    Thanks a lot,
    Bernd

    June 8, 2017 at 11:01 pm #805775
    acadas

    Please respond to this thread.
    Greetings,
    Mike

    June 9, 2017 at 8:59 am #805917
    acadas

    Hi guys,
    sorry to remind you again. PLEASE respond to this thread.
    Thank you!
    Cheers,
    Mike

    June 9, 2017 at 6:05 pm #806164
    Basilis

    Hi,

    You can use with code of Ricard, with Media queries

    @media queries Responsiveness

    Best regards,
    Basilis

    June 9, 2017 at 8:29 pm #806209
    acadas

    Hi Basilis,
    thanks a lot. This was great help! It works just perfect. You can close this thread.
    Just wanted to share for others how I changed the CSS code (thanks to you link):

    #top label {
    margin-top: -15px;
    margin-bottom: 0px;
    }
    #top .avia_ajax_form .text_input, #top .avia_ajax_form .select {
    padding: 8px;
    }
    @media screen and (min-width:480px) {
    #top .avia_ajax_form input[type=”checkbox”] {
    top: -12px!important;
    }
    }

    Best regards,
    Bernd

    June 11, 2017 at 8:00 am #806491
    Rikard

    Hi,

    Great, glad you got it working and thanks for sharing. Please note that you send you request to the back of our support queue each time to you reply to it so please try not to do so in the future.

    Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Enfold contact form: fields more narrow’ is closed to new replies.