Page 1 of 1

Adjust width of input fields

PostPosted: April 22nd, 2011, 6:55 pm
by Magicmarker
http://chicacafe.redwebtestsite.com

My login fields are too wide. Where do I shorten those?

Re: Adjust width of input fields

PostPosted: April 22nd, 2011, 7:13 pm
by toddz88
I added this to my theme's main CSS file. It makes the input fields 300px wide, but you can adjust to your needs. The Select element is separate, since it should not get the padding and font-size too.


Code: Select all
/* input fields should not be 100% wide  */
form div.s2member-pro-paypal-form-section > div.s2member-pro-paypal-form-div input[type="text"],
form div.s2member-pro-paypal-form-section > div.s2member-pro-paypal-form-div input[type="password"],
form div.s2member-pro-paypal-form-section > div.s2member-pro-paypal-form-div textarea
{
   width: 300px;
   padding: 3px;
   font-size: 1em;
}
form div.s2member-pro-paypal-form-section > div.s2member-pro-paypal-form-div select {
   width: 300px;
}

Re: Adjust width of input fields

PostPosted: April 22nd, 2011, 8:02 pm
by Magicmarker
Seemed to have no effect (?).

Re: Adjust width of input fields

PostPosted: April 22nd, 2011, 8:17 pm
by toddz88
You need to change the css selectors to target the specific elements you want to effect. On your site, try
Code: Select all
form#loginform input#user_login,
form#loginform input#user_pass {
width: 260px;
}

but since I see those elements have inline style="width: 100%", you might need to override it with
Code: Select all
width: 260px !important

Re: Adjust width of input fields

PostPosted: April 22nd, 2011, 8:27 pm
by Magicmarker
Yes, I had to add the second suggestion as well but it worked! Thank you for your time!!