Here's how to make the profile responsive

[Mohib]

I’m sure many are looking to make the profile form responsive, but without changing the plugin. Here’s how to do it with just CSS in your WordPress theme.

It’s not the ideal solution because on very narrow screens the field do get very narrow and ideally you’d want the field prompts to move above the fields so the fields are wider, but that’s not possible without recoding the plugin as the form uses a table. But this looks and works well enough on an iPhone 4s or larger in portrait mode (see screen shots below). If you adjust the margins and font size smaller you can make the fields even wider.

(NOTE: If you’re looking to also create responsive email templates see my earlier post here: https://www.thenewsletterplugin.com/forums/topic/excellent-resource-for-responsive-emails )

UNRESPONSIVE DEFAULT
——————–
Here’s what the default profile form looks like in my theme without customization in a regular, wide browser window:
http://screencast.com/t/K5b68J9ux

Here’s what it the default looks like when you make the window narrow. Note the fields extend past edge of screen and don’t resize to the screen width:
http://screencast.com/t/5dA5YQA3K5U

Here’s what it looks like on an iPhone 4s:
http://screencast.com/t/8qxnfK3wEtT

RESPONSIVE VERSION
——————–
Here’s what the responsive profile form looks like (with some CSS to clean up the form’s appearance):
http://screencast.com/t/Sv85zso9Il

Here’s what the responsive version looks like when you make the window narrow. Note fields doesn’t go off the end but adjust in size
http://screencast.com/t/3wQzgXPPWFqv

Here’s what the responsive version looks like on an iPhone 4s:
http://screencast.com/t/36h50UT1

CSS TO DO THIS
——————–

The trick is:

width: 100%;
max-width: 350px;

Which forces elements to be the full width of their container (on narrow screens) upto a maximum width (for wider screens)

/*** new style for forms for theme ***/
}
input[type=reset], input[type=submit], button {
border-radius: 2px;
letter-spacing: 0.00em;
background:#ffad40;
color:#1f3644;
}

input[type=reset]:hover, input[type=submit]:hover, button:hover {
background:#1f3644;
}

form {
display: block;
width: 95%;
padding-left: 0%;
clear: both !important;
line-height: 2.5em;
}

form th {
padding-right: .5em;
vertical-align:top;
}

input[type=text], input[type=search], input[type=email], input[type=url] {
width: 100%;
max-width: 350px;
padding: 5px 0px 5px 5px;
-webkit-appearance: none;
border-radius: 2px;
border: 1px solid #cccccc;
background-color: rgb(255, 255, 255);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

select {
width: 100%;
max-width: 350px;
padding: 5px 0px 5px 5px;
border-radius: 2px;
border: 1px solid #cccccc;
background-color: rgb(255, 255, 255);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

/*** newsletter customizations – entire profile div, save button position, check box spacing ***/

div.newsletter-profile {
margin:2em 0em 2em 0em;
}

div.newsletter-profile form {
width: 100%;
}

.newsletter-td-submit {
text-align:right;
}

.newsletter-preferences {
width: 100%;
max-width: 350px;
line-height: 1.5em;
padding-top: .5em;
}

[Mohib]

Hmm, well that didn’t work too well. For some reason all the paragraph/line breaks are being removed from posts when they are displayed because if I re-edit, they’re all still there.

Admins, looks like something’s broken somewhere. 🙂

[Mohib]

For reference, here’s what I posted: http://screencast.com/t/iuXRXJS1pS — and what is appearing when you view posts: http://screencast.com/t/bxbXIuZMlrIw

[Mohib]

Actually it’s better than what I posted above because the prompt “Newsletters” is actually a modification I made to the subscription.php. The default behaviour doesn’t have that prompt (which is the widest prompt and so takes up the most room) and so more space is left for the fields. The default form would look like this:
http://screencast.com/t/416DROPS

But the fields can be made even wider, with some expense for clarity, if the entire prompt column is hidden when on a smaller mobile screen:
http://screencast.com/t/cyEamzRNvV

Of course this won’t be helpful if your form has text fields as the user won’t know easily what the fields are for.

To do remove the field prompts, add this to the end of your theme’s CSS file:

@media screen and (max-width: 680px) {
div.newsletter-profile form th {
display:none;
}
}

Or add just this:

div.newsletter-profile form th {
display:none;
}

to relevant @media screen section your theme has for smaller screens.

[Author]

Posts