![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
June 6, 2017 at 1:12 pm #804486
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 #804845Hey 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,
RikardJune 7, 2017 at 9:45 am #804964Hey 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,
BerndJune 7, 2017 at 11:17 am #805020Hi Rikard,
please also check the aatached dropbox link.
Regards,
BerndJune 8, 2017 at 9:30 am #805476Hi 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,
BerndJune 8, 2017 at 11:01 pm #805775Please respond to this thread.
Greetings,
MikeJune 9, 2017 at 8:59 am #805917Hi guys,
sorry to remind you again. PLEASE respond to this thread.
Thank you!
Cheers,
MikeJune 9, 2017 at 6:05 pm #806164Hi,
You can use with code of Ricard, with Media queries
Best regards,
BasilisJune 9, 2017 at 8:29 pm #806209Hi 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,
BerndJune 11, 2017 at 8:00 am #806491Hi,
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 -
AuthorPosts
- The topic ‘Enfold contact form: fields more narrow’ is closed to new replies.