Responsive page layout for wp-login.php

[ioerjfoige0439i]

Any chance you can make the s2member wp-login.php page responsive in a future release? Or is that something only done by the theme?

[jaswrks]

Great idea!

The wp-login.php file is what controls this. s2Member adds the ability to customize this area further; and at present the only non-responsive portion of this is the width of the logo. When you setup a logo image you are asked to specify the width. The width that you choose for the logo dictates the overall width of the layout in this area.

As far as I know, WordPress doesn't apply any responsive @media queries to wp-login.php; and neither does s2Member at this time.

A short-term solution could be to set your logo width to a small size; or add some custom CSS that would use an @media query to drop the size of this logo on mobile devices. That's what we can plan to do in this issue for a future release.

• TODO: Add an @media query to deal with the width of the login/registration customizations and make this as responsive as we can, without disrupting the normal flow of WordPress.

[ioerjfoige0439i]

Thanks and thanks.

[jaswrks]

@raamdev Would you be able to help me with this one?

[raamdev]

Would you be able to help me with this one?

Sure. Assigning this to myself.

[ioerjfoige0439i]

@raamdev @jaswsinc Also can you make an option to proportionately stretch to fit the background image, even if it has to cut some of it off, if the image is not tileable? Thanks.

[raamdev]

@jaswsinc I've modified the existing CSS rules a bit to make the login form more responsive. I was able to do this without adding @media queries or detecting the browser width. Basically I added width: 100% to div#login and changed the width:550px (or whatever the user specified in the configuration) to max-width: 550px.

Finally, I changed background-size:auto to background-size:contain on div#login h1 a.

The result is as follows:

---

As you can see, the logo auto-resizes, as does the login form, when the browser is less than 550px (or whatever the user configured for the logo width).

Does this work? If so, please let me know and I'll finish up here by updating the documentation in Dashboard → s2Member → General Options → Login/Registration Design to explain that 550px becomes the maximum width of the login form.

[ioerjfoige0439i]

Hey @raamdev what about the page's main background image? In the image below you see it works great with a tileable image but if you select a non tileable image, when you resize the screen it looks odd and doesn't take up the full screen (like on mobile) or when you have a screen larger than the background image.

[raamdev]

@ioerjfoige0439i

if you select a non tileable image, when you resize the screen it looks odd and doesn't take up the full screen (like on mobile) or when you have a screen larger than the background image.

Are you selecting "No Tiles" in the background configuration in Dashboard → s2Member → General Options → Login/Registration Design?

[ioerjfoige0439i]

@raamdev Yes that is correct. My point is that the background image for the page should stretch to fit the entire background on mobile and desktop.

[jaswrks]

@jaswsinc I've modified the existing CSS rules a bit to make the login form more responsive. I was able to do this without adding @media queries or detecting the browser width. Basically I added width: 100% to div#login and changed the width:550px (or whatever the user specified in the configuration) to max-width: 550px.

Finally, I changed background-size:auto to background-size:contain on div#login h1 a.

@raamdev Brilliant. That looks great! Can you also add some html, body padding of say 10px so there is spacing around the login form on small screens?

[ioerjfoige0439i]

@jaswsinc Good idea, I was just gonna say that.

[jaswrks]

should stretch to fit the entire background on mobile and desktop

Hmm. That's a tough one. I think it should be configurable since some site owners may not like this (e.g. if a scaled background image would destroy the effect that a certain image provides).

Maybe we could set @media (max-width: 767px) { html, body { background-size: contain !important; } } to shrink it down on mobile devices, but leave it as auto on desktops. That would cover mobile issues, but leave it preserved on desktops. If a site owner needs to tweak it further on a desktop they can do that with custom CSS of their own.

[ioerjfoige0439i]

@jaswsinc Beautiful, and make it centered, not in the top left. #WebSharksEmpire

[raamdev]

Can you also add some html, body padding of say 10px so there is spacing around the login form on small screens?

Maybe we could set @media (max-width: 767px) { html, body { background-size: contain !important; } } to shrink it down on mobile devices, but leave it as auto on desktops.

Done and done in 40f794b

[jaswrks]

Great! Thanks so much @raamdev; and thanks @ioerjfoige0439i for your input that helped us work toward a resolution here. Long live #WebSharksEmpire ~ haha. Love it!