In this post, I am going to teach you how to make a responsive Hide My Site login page that looks good on both mobile and desktop devices. Note that you will have to be using Hide My Site premium in order to follow along.

Step 1. Choose the “Discreet” theme

In your WordPress admin > Settings > Hide My Site > Select a theme for your login page > pick “Discreet”

Step 2. Upload your background image

In our example we are going to upload a background image that includes text. Often times Hide My Site users will want to do this, but then they discover that the text get blocked by the login form when the page is resized on mobile devices. We want to be sure that the text doesn’t get blocked on mobile devices.

Upload your background image via the “Custom Background Image” setting. Then, set the “Background Image Position” to “Proportional Stretch”.

Step 3. Configure page colors to match (optional)

In my example case, I set the “Background Color” setting to #e0da97. In the “Custom CSS” field, I added the following code:

Step 4. Admire your final product

The new login form image text looks nice on all devices. The text does not get blocked on both mobile and desktop. Three cheers for cross-device compatibility!

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.