Deferred

Mobile Responsive Login Page

Login is first thing a lot of returning customers see on their mobile but the fields are all ugly and run off the screen. Even in my beautiful Divi 2.0 elegant theme text box> :(

2 people like this idea
Yup... also happens with the My Account page :-(

+1

We had the same issue. To resolve it we eliminated the table from the MemberMouse Login Page and modified the remaining code to fit on a phone as follows.


[MM_Member_Decision isMember='false']

[MM_Form type='login']

<div class="mm-login">[MM_Form_Message type='error']

[MM_Form_Message type='success']

<p style="font-weight:bold; font-size:125%;">Username</p>

[MM_Form_Field name='username']

<p style="font-weight:bold; font-size:125%;">Password</p>

[MM_Form_Field name='password']<br><br>

[MM_Form_Button type='login' label='Login']<br><br>

[MM_Form_Field name='rememberMe' label='Remember me']<br><br>

<a class="mm-forgot-password" href="[MM_CorePage_Link type='forgotPassword']">Forgot Password</a>

</div>

[/MM_Form]

[/MM_Member_Decision]

Thank you for this suggestion! This feature request or some aspect of the functionality suggested is currently being reviewed for possible inclusion in a future update. If there is additional information, this post will be updated to reflect it.

I purchased MemberMouse based on a recommendation from Elegant Themes. It was between you and MemberPress. The majority of the world is on mobile devices and the MemberMouse login form looks terrible and that is a negative reflection on all of your clients with their clients. I'm not sure why this has not been addressed, but it would be great if you would fix this. I also submitted a support ticket with Elegant Themes to contact you directly to see if you guys can work something out. If not, they should not be recommending your product.

 

yes we need this

 

Hey MM customers,


Here's a little snippet of CSS that will make your login/password forms mobile responsive.  Just add this to your stylesheet and you should be good to go.

.mm-login,
.mm-forgot-password,
.mm-resetpassword {
	width: auto !important;
}
.mm-login tr,
.mm-forgot-password tr ,
.mm-resetpassword tr {
	height: auto !important;
	margin: 0 0 20px;
}
.mm-login table tr,
.mm-login table th,
.mm-login table td,
.mm-forgot-password table tr,
.mm-forgot-password table th,
.mm-forgot-password table td,
.mm-resetpassword table tr,
.mm-resetpassword table th,
.mm-resetpassword table td {
	display: block;
}
.mm-login .mm-label-column,
.mm-forgot-password .mm-label-column,
.mm-resetpassword .mm-label-column {
	width: auto !important;
	margin: 0 0 5px;
	font-weight: 700;
	color: #333;
}
.mm-login .mm-field,
.mm-forgot-password .mm-field,
.mm-resetpassword .mm-field {
	width: 100% !important;
	margin: 0 0 10px;
}
.mm-remember-me {
	position: relative;
	font-size: .85em;
	font-weight: 300;
	line-height: 1.4;
	margin: 20px 0 !important;
	padding-left: 20px;
}
.mm-remember-me br {
	display: none;
}
.mm-remember-me input[type="checkbox"] {
	position: absolute;
	top: 3px;
	left: 0;
	margin: 0 !important;
}
#mm-login-button,
#mm-submit-button {
	width: 100% !important;
}

 If you need more help feel free to ping us any time - https://memberdev.com/contact/


- Ali


Login or Signup to post a comment