+1 on this.
It would be better to have profile details displayed below and not next to account details to make mobile registration look better.
Has anyone found a solution to this?
Thanks,
Lars
Hi @darrenllrgmailcom, @adjunkten,
i had the same issue with a custom theme: fields didn’t wrap properly on small screens…
To solve it, i simply copied the concerned form rules from Twenty Sixteen into my child theme css and all went OK after that.
The 2016 rules of the register page:
#buddypress #signup_form.standard-form #profile-details-section,
#buddypress #signup_form.standard-form #basic-details-section,
#buddypress #signup_form.standard-form #blog-details-section {
float: none;
width: 100%;
}
@media screen and (min-width: 38.75em) {
#buddypress #signup_form.standard-form #profile-details-section,
#buddypress #signup_form.standard-form #basic-details-section,
#buddypress #signup_form.standard-form #blog-details-section {
width: 48%;
}
}
@media screen and (min-width: 38.75em) {
#buddypress #signup_form.standard-form #profile-details-section {
float: right;
}
#buddypress #signup_form.standard-form #basic-details-section {
float: left;
}
}
Thank you @danbp, works like a charm!
Lars
Awesome, thanks Dan 😉
I also got some CSS – one of the Avada Support guys (Muhammad I think) sent it over to me – needed a few tweaks, but also that now seems to have done the trick with me – if it helps any, great –
@media all and (max-width: 768px) {
#buddypress #register-page form#signup_form .register-section{
width: 100%;
}
}
#buddypress .standard-form #basic-details-section input[type="password"],
#buddypress .standard-form #blog-details-section input#signup_blog_url,
#buddypress .standard-form #basic-details-section input#signup_username,
#buddypress .standard-form #profile-details-section input#field_1
{
width: 100%;
}
The only minor bug-bear with me now is the Recaptcha overflowing, but I can live with that.
For tonight 😉
Thanks again Dan 😉
@darrenllrgmailcom,
when you bingo bongo a theme like Avada, you should take in account that you have to “integrate” most of external elements such as plugins.
It’s not a ready to use theme you can deploy over anything without attention. It is a theme buider with hundreds of options in an environment.
So i guess it is the case with Recaptcha plugin. First thing to do is to check how it reacts whith Twenty Sixteen. If Recaptcha ouput is correct on mobile, pick the css from the plugin and add it to your child theme.
