making registration/login forms responsive

  • Resolved andrew55

    (@andrew55)


    6 years, 2 months ago

    Instead of forms being stacked on each other on desktop, we wanted to have them next to each other. Then, on mobile, they become stacked. I couldn’t find out how to do this anywhere else, so I created the following css to be added to theme file:

    #wpas_form_login {
	width: 48% !important;
	clear:none !important;
	float:left !important;
}

#wpas_form_registration {
	width: 48% !important;
	clear:none !important;
	float:right !important;
}

@media screen and (max-width: 770px) {
#wpas_form_login {
	width: 95% !important;
	clear:both !important;
	float:none !important;
}

#wpas_form_registration {
	width: 95% !important;
	clear:both !important;
	float:none !important;
}
}

input .wpas-form-control, 
textarea .wpas-form-control, 
.uneditable-input .wpas-form-control {
    width: 100% !important;
}

.wpas-checkbox input {
    width: 5% !important;
}

    I thought this might help someone who wants a more responsive layout. Also, if anyone has any better suggestions, please let me know.

    • This topic was modified 6 years, 2 months ago by andrew55.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author melliesou

    (@melliesou)

    Hi @andrew55,

    Much appreciated for the responsive design code you have shared above for the forms. I’ll mark this thread as “resolved” so if anyone else is looking for it, they will see a nice green checkmark when reading your post.

    Here are some related resources when considering a “Responsive Design”
    https://en.wikipedia.org/wiki/Responsive_web_design
    https://www.w3schools.com/html/html_responsive.asp
    (Note: having a “viewport” meta tag in your site may be necessary if you don’t already have it set site-wide)

    Thanks for your work!

    Thread Starter andrew55

    (@andrew55)

    Here is a cleaner/better version. Maybe this will help someone. May need some tweaking depending on your theme: 

    #wpas_form_login {
	width: 48% !important;
	clear:none !important;
	float:left !important;
}

#wpas_form_registration {
	width: 48% !important;
	clear:none !important;
	float:right !important;
}

@media screen and (max-width: 600px) {
#wpas_form_login {
	width: 98% !important;
	clear:both !important;
	float:none !important;
}
#wpas_form_registration {
	width: 98% !important;
	clear:both !important;
	float:none !important;
}
}

.wpas-form-control {
    width: 95% !important;
}

    If anyone has better ideas, please let me know.

    Plugin Author melliesou

    (@melliesou)

    Cheers @andrew55,

    We appreciate you taking the time to post the improvements here. Thank you for sharing your efforts here.

    Thread Starter andrew55

    (@andrew55)

    Hope it helps someone!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘making registration/login forms responsive’ is closed to new replies.