Login & Registration Forms Not Responsive on Mobile

This topic contains 20 replies, has 4 voices, and was last updated by  Alex Rollin 6 years, 2 months ago.

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

Open Support Ticket
  • Author
    Posts
  • January 20, 2018 at 8:33 pm #1377

    Backpacking Series
    Buyer
    Post count: 104

    Hello,

    I just noticed the login and registration forms are not responsive on mobile view.
    URL:https://www.backpackingseries.com/login

    Is this a known issue or am I missing anything here?

    PS: I’ve tried from different browsers and tested after cleared caches!

    Kind regards

    January 21, 2018 at 12:43 am #1378

    Guust
    Moderator
    Post count: 29970

    Try adding this CSS:

    

    @media screen and (max-width: 400px) {
.uwp-login, .uwp-registration, .uwp-forgot, .uwp-account {padding: 0px;}
}
    

    Adjust the width as required.
    

    Thanks 
    

		
	
    


    

			
				

    

	
    

		January 21, 2018 at 7:27 am

		
		#1379

		
		
		
	
    


    


    

	
    

		
		
    Backpacking Series
    Buyer
    
		
		
     Post count: 104
    
	
    

	
    

		
		
    Thank you for the suggestion.
    

    I tried width at 400px and “100%”. Neither works.
    

    PS: Is there a plan to release an upgrade with mobile-responsive forms?
    

    Kind regards
    

		
	
    


    

			
				

    

	
    

		January 21, 2018 at 10:53 am

		
		#1380

		
		
		
	
    


    


    

	
    

		
		
    Guust
    Moderator
    
		
		
     Post count: 29970
    
	
    

	
    

		
		
    We will add that the next update, and that code worked for me.
    
If you post your admin details in a private reply, we can check if you like.
    
Or try changing to 
    

    

    @media screen and (max-width: 400px) {
.uwp-login, .uwp-registration, .uwp-forgot, .uwp-account {padding: 0px !important;}
}
    

    Thanks
    

		
	
    


    

			
				

    

	
    

		January 21, 2018 at 12:20 pm

		
		#1381

		
		
		
	
    


    


    

	
    

		
		
    Backpacking Series
    Buyer
    
		
		
     Post count: 104
    
	
    

	
    

		
		
    Thank you Guust.
    

    Will try the recommended alternate and update the status here.
    

    PS: Do you have an ETA for the next update to the plugin?
    

    Kind regards
    

		
	
    


    

			
				

    

	
    

		January 21, 2018 at 1:24 pm

		
		#1382

		
		
		
	
    


    


    

	
    

		
		
    Guust
    Moderator
    
		
		
     Post count: 29970
    
	
    

	
    

		
		
    No ETA for the next update I am afraid. 
    

		
	
    


    

			
				

    

	
    

		January 22, 2018 at 12:54 pm

		
		#1391

		
		
		
	
    


    


    

	
    

		
		
    Patrik
    Moderator
    
		
		
     Post count: 1971
    
	
    

	
    

		
		
    Please try adding following CSS code in style.css of your currently active theme or in Appearance -> Customize -> Additional CSS box:
    

    

    @media screen and (max-width: 520px) {
body.uwp_page .uwp-login, body.uwp_page .uwp-registration, body.uwp_page .uwp-forgot, body.uwp_page .uwp-account {width:auto;}
}
    

    Let us know if it fixes an issue.
    

    Regards,
    
Patrik
    

		
	
    


    

			
				

    

	
    

		January 22, 2018 at 2:36 pm

		
		#1393

		
		
		
	
    


    


    

	
    

		
		
    Backpacking Series
    Buyer
    
		
		
     Post count: 104
    
	
    

	
    

		
		
    @patrick,
    

    Thank you for the suggestion. 
    

    I injected the code in the relevant css file. Unfortunately, it does not give the desired result – even after deleting all the cache files. URL:https://www.backpackingseries.com/login
    

    The code is retained – just so you can test from a mobile device (to rule out caching issues). You might notice that all UsersWP forms extend beyond the right edge of a box enclosure.
    

    Kind regards
    

    Abhijeet
    

		
	
    


    

			
				

    

	
    

		January 22, 2018 at 9:47 pm

		
		#1398

		
		
		
	
    


    


    

	
    

		
		
    Guust
    Moderator
    
		
		
     Post count: 29970
    
	
    

	
    

		
		
    You should not change any of the core files, but add the CSS to your child theme or a CSS plugin or at GD > Design > Scripts [that is where it works for me].
    

    Otherwise, try adding !important like this:
    

    

    @media screen and (max-width: 520px) {
body.uwp_page .uwp-login, body.uwp_page .uwp-registration, body.uwp_page .uwp-forgot, body.uwp_page .uwp-account {width:auto !important;}
}
    

    Thanks
    

		
	
    


    

			
				

    

	
    

		January 23, 2018 at 4:32 am

		
		#1402

		
		
		
	
    


    


    

	
    

		
		
    Patrik
    Moderator
    
		
		
     Post count: 1971
    
	
    

	
    

		
		
    I don’t see the new CSS on the site in view source or style.css file. Are you sure you have added the CSS in either current theme’s style.css file or in additional CSS section?
    

    If possible create a temp admin credentials for us and provide here as a private reply so that we can log in and do the changes.
    

    Thanks!
    

		
	
    


    

			
				

    

	
    

		January 23, 2018 at 12:56 pm

		
		#1406

		
		
		
	
    


    


    

	
    

		
		
    Backpacking Series
    Buyer
    
		
		
     Post count: 104
    
	
    

	
    

		
		This reply has been marked as private.
		
	
    


    

			
				

    

	
    

		January 23, 2018 at 1:21 pm

		
		#1407

		
		
		
	
    


    


    

	
    

		
		
    Patrik
    Moderator
    
		
		
     Post count: 1971
    
	
    

	
    

		
		
    I have made the changes in Appearance -> Customize -> Additional CSS box and it is working fine now.
    

    Please review it and let us know if anything.
    

    This will be fixed in the future release.
    

    Regards,
    
Patrik
    

		
	
    


    

			
				

    

	
    

		January 23, 2018 at 1:37 pm

		
		#1408

		
		
		
	
    


    


    

	
    

		
		
    Backpacking Series
    Buyer
    
		
		
     Post count: 104
    
	
    

	
    

		
		
    Works like a charm! Thank you.
    

    The code under Appearance (without media parameter) is different from the one recommended above (with the parameters). Was that the problem? Can I transfer your code in the plugin CSS file? It is just easier for me manage all customization centrally. Hence the question. Or would you suggest to leave it untouched for now until the future release?
    

    Kind regards
    

		
	
    


    

			
				

    

	
    

		January 23, 2018 at 1:51 pm

		
		#1409

		
		
		
	
    


    


    

	
    

		
		
    Patrik
    Moderator
    
		
		
     Post count: 1971
    
	
    

	
    

		
		
    The CSS given previously was specific to mobile devices and I have removed the code and made it globle which will not affect the form. I would say keep it as it is for now till you get plugin updates and then remove from admin instead of moving to code.
    

    Regards,
    
Patrik
    

		
	
    


    

			
				

    

	
    

		January 23, 2018 at 2:52 pm

		
		#1410

		
		
		
	
    


    


    

	
    

		
		
    Backpacking Series
    Buyer
    
		
		
     Post count: 104
    
	
    

	
    

		
		
    Got it. Thank you Patrick.
    

    For visitors who stop by for a solution to a similar problem, here’s the code that works!
    

    body.uwp_page .uwp-login, body.uwp_page .uwp-registration, body.uwp_page .uwp-forgot, body.uwp_page .uwp-account {width:auto;}
    

    Kind regards
    

		
	
    


    

			
		
	
    • 

	
  • 

		
    Author
    

		
    

			
				Posts
			
		
    

	
    • 





			



	


		Viewing 15 posts - 1 through 15 (of 21 total)
	


	


		

	

	





		
				

			

				

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

					Open Support Ticket