In this post, I am going to teach you a new method for making a responsive Hide My Site login page. I wrote another tutorial on this topic a while back, however that article was targeted specifically for users employing the Discreet theme. For those using any of the other login page themes, this article will show you how to make your login page look good on both mobile and desktop devices. Note that you will have to be using Hide My Site premium in order to follow along with this tutorial.

Here is a quick walk-through outlining the process.

The End Result

Before we get started, here’s what we are working toward.

Step 1. Override the login page template file

For more information on how to override login pages, refer to the section titled “How to override the login page template within your theme folder” on http://www.clevelandwebdeveloper.com/wordpress-plugins/hide-my-site/

Step 2. Edit the template file page

For the sake of example, let’s assume you are using the Ice theme for your login page. Open up hmsice.php (if you were using the Iris theme you would open up hmsiris.php, etc…). Before the opening <style> tag, add the following new line of code:

Step 3. Add mobile-friendly CSS

In the Hide My Site settings page > Custom CSS:

Step 4. Admire your final product

Your new login form now looks great on all devices. Well done!

Thanks for taking the time to follow this tutorial. Hope you find it helpful. Please let me know if you have any questions or other feedback in the comments.