Responsive forms ?

Hello,

By default the EM forms are responsive. The reason why it’s not responding is probably because your theme is overriding it. However those can be tweaked with CSS.

Here is some CSS that might help you. You can put it on your themes css of a place that accepts custom css.

#em-booking div.em-booking-login {
    clear: both;
    float: none;
    margin: 0;
    border-left: 0;
}

form.em-booking-form .em-booking-form-details {
   float: none;
   display: block;
   width: 100%;
}

Thank you timrv, much better now !
There are still a few things unbalanced (such as the recaptcha eating up space on the login button), I’ll try to adapt things myself…
but of course if you would like to suggest code you’ll happily be welcome ! ??
Cheers,

Me again ??
May I suggest a small usability change to the login form, “remember me” input ?

Currently :

<input name="rememberme" type="checkbox" id="em_rememberme" value="forever">
<label>Remember me</label>

Issue (aside from a headache-inducing alignment complexity) : user has to click the checkbox ONLY to check/uncheck .

Proposed :

<label>
<input name="rememberme" type="checkbox" id="em_rememberme" value="forever">
Remember me
</label>

i.e put the checkbox inside the label
Usability improvement : user can click anywhere in the text and in the checkbox to check/uncheck .

Thanks for your feedback ??

P.S: Funny enough, when inserting the GDPR-compliant consent form, it’s the proposed way that is used, and the looks are wonderful ! ??

• This reply was modified 6 years, 4 months ago by Palijn. Reason: (formatting)
• This reply was modified 6 years, 4 months ago by Palijn. Reason: Adding note relative to the other label on the page when inserting GDPR-compliant consent form

For the record, in a pure “style with a hammer” fashion, I ended up with the following CSS additions :

div.em-booking-login label,div.em-booking-login input ,.em-booking-form label,
.em-booking-form-details input.input, .em-booking-form-details textarea,
.em-booking-form-details .em-booking-submit, .em-ticket-select {
	width:100%;
}
.em-booking-form label {
	  margin:	0.75em 2% 0.25em 0;
}
.anr_captcha_field {
	padding: 0.75em;
	clear: both;
}

in addition to your unchanged :

#em-booking div.em-booking-login {
    clear: both;
    float: none;
    margin: 0;
    border-left: 0;
}

form.em-booking-form .em-booking-form-details {
   float: none;
   display: block;
   width: 100%;
}

You’re Welcome. I tried checking the page again and seems like you have fixed it ??

I’d still be eager to benefit from the small change I suggested in the label/checkbox order for the “remember me” line. ??
Other than that, thanks again !