You are here: Blog » Tutorials » How to make Hide My Site responsive

How to make Hide My Site responsive

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.

The step headers (Step 1, Step 2, etc...) and dividers on this post were proudly made with Visual Artist
This entry was posted in Tutorials and tagged by .

Author: justin saad

Justin Saad is first and foremost a husband and a father of four. He is also a web developer and designer who has been making websites for over twenty years. His company is called The Motech Network and his website is In addition to building websites, Justin makes WordPress plugins and likes writing tutorials to help others learn about various aspects of web development.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">