Login Form Different on Mobile

This topic contains 10 replies, has 2 voices, and was last updated by  Guust 6 years, 6 months ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
  • Author
    Posts
  • October 15, 2017 at 11:42 am #765

    Backpacking Series
    Buyer
    Post count: 104

    Hello,

    UsersWP forms differ in their outlook on laptop and on mobile (screen shots attached). Could you please advise how to make the mobile view consistent?

    PS: I use a /child theme/userswp directory to customize the forms.

    Thank you

    October 15, 2017 at 1:31 pm #768

    Guust
    Moderator
    Post count: 29970

    Can you please post your URL and WP admin details so we can check your site?
    Thanks

    October 15, 2017 at 3:55 pm #769

    Backpacking Series
    Buyer
    Post count: 104
    This reply has been marked as private.
    October 15, 2017 at 11:01 pm #770

    Guust
    Moderator
    Post count: 29970

    That seems to be your own customization that is added, the issue may be there.
    It seems you have added your custom CSS but not for media devices.

    I’ll get Giri to have a look too.

    Thanks

    October 16, 2017 at 2:01 am #774

    Backpacking Series
    Buyer
    Post count: 104

    Thank you Guust.

    I am sharing the basic custom CSS (Appearance – Customize – Additional CSS) for reference below. Might I request your / Giri’s thoughts on why it impacts only the userswp forms and, if possible, directions to fix the issue.

    Kind regards

    Abhijeet

    

    
/*
Child Theme Customization
*/
.site-logo-link {
    float: left;
}

.site-title {
    float: left;
    clear: inherit;
    margin-top: 17px;
}

.search-toggle {
	border: none;
	height: 62px;
	width: 60px;
}

.main-navigation {
	z-index: 100000;
}

.home #primary:before {
	content: "Slow Travel. Long Reads.";
	display: block;
	text-align: center;
	margin-top: 20px;
	font-size: 110%;
}

/*
Plugin Customization Section
*/

/*
Plugin - UsersWP
*/

.uwp-login, .uwp-registration, .uwp-forgot, .uwp-account, .uwp-change, .uwp-profile {
    background-color: #ffffff;
    border-style: solid;
    border-color: #000000;
}

.uwp_page .uwp-lf-icon, .uwp_widgets .uwp-lf-icon, .uwp_adv_search_form .uwp-lf-icon {
    border: none;
    width: 100px;
    height: 100px;
}

.uwp_page .uwp-forgotpsw, .uwp-register-now, .uwp_widgets .uwp-forgotpsw, .uwp_adv_search_form .uwp-forgotpsw {
    float: right;
}
    

		
	
    


    

			
				

    

	
    

		October 16, 2017 at 2:24 am

		
		#776

		
		
		
	
    


    


    

	
    

		
		
    Backpacking Series
    Buyer
    
		
		
     Post count: 104
    
	
    

	
    

		
		
    Just wanted to share this info – I tried the following steps with no success. Your thoughts are welcome.
    

    1. Deactivated a site-specific plugin (disables wp admin bar and enqueues wp_scripts)
    
2. Deactivated the AMP plugin (supports rendering of mobile pages)
    
3. Added the following CSS for media queries – 
    

    

    /*For browser/screen widths less than 768px (and for 800px also) */
@media screen and (max-width: 768px) {
    .container {
        max-width: 100%;
    }
    .content {
        width: 100%;
    }
    .sidebar {
        width: 100%;
    }
}
    

		
	
    


    

			
				

    

	
    

		October 16, 2017 at 2:41 am

		
		#777

		
		
		
	
    


    


    

	
    

		
		
    Backpacking Series
    Buyer
    
		
		
     Post count: 104
    
	
    

	
    

		
		
    One other observation: the forms appeared fine on mobile devices in the earlier versions of the plugin. Not sure whether this info is material to the problem.
    

		
	
    


    

			
				

    

	
    

		October 16, 2017 at 11:42 am

		
		#778

		
		
		
	
    


    


    

	
    

		
		
    Backpacking Series
    Buyer
    
		
		
     Post count: 104
    
	
    

	
    

		
		
    When I disable JetPack’s Mobile Theme feature, the login form is rendered along with the custom CSS but, instead of under (like the screen shot earlier), the page on mobile view is over-sized. Not sure what’s happening. Look forward to your thoughts. Thank you.
    

		
	
    


    

			
				

    

	
    

		October 16, 2017 at 12:59 pm

		
		#781

		
		
		
	
    


    


    

	
    

		
		
    Guust
    Moderator
    
		
		
     Post count: 29970
    
	
    

	
    

		
		
    It is not the plugin that is the problem, it is your CSS.
    
Try this
    

    

    .uwp-login, .uwp-registration, .uwp-forgot, .uwp-account {
    width: initial;
}
    

    Thanks
    

		
	
    


    

			
				

    

	
    

		October 16, 2017 at 1:12 pm

		
		#782

		
		
		
	
    


    


    

	
    

		
		
    Backpacking Series
    Buyer
    
		
		
     Post count: 104
    
	
    

	
    

		
		
    Thank you Guust, 
    

    Yes, it works like a charm! My apologies for that oversight and I am grateful for your support.
    

    Kind regards
    

    Abhijeet
    

		
	
    


    

			
				

    

	
    

		October 16, 2017 at 11:04 pm

		
		#789

		
		
		
	
    


    


    

	
    

		
		
    Guust
    Moderator
    
		
		
     Post count: 29970
    
	
    

	
    

		
		
    You’re welcome 🙂
    

		
	
    


    

			
		
	
    • 

	
  • 

		
    Author
    

		
    

			
				Posts
			
		
    

	
    • 





			



	


		Viewing 11 posts - 1 through 11 (of 11 total)
	


	


		
	





		
				

			

				

					
We have moved to a support ticketing system and our forums are now closed.

					Open Support Ticket