Executive Pro – Form Fields Too Wide

Community Forums Forums General Discussion Executive Pro – Form Fields Too Wide

This topic is: resolved

This topic contains 4 replies, has 3 voices, and was last updated by  JenniB 1 month, 1 week ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #97701

    Nick Liberati
    Member
    Post count: 2

    Hi All -

    I have some form fields in this theme that are displaying as full-width. For instance, the ‘first name’ field would only need to allow for about 15-20 characters, but the width of the input field is full-width, which looks kind of silly.

    Same for a social sharing plug-in. I need it to only be about 1/4 the width of the page, but it is full-width.

    Any idea how I can control the width of such things? (My css and function capabilities are remedial, at best).

    You can see an example in the URL below.

    Thanks in advance.

    Nick

    http://coaching.mindthebottomline.com/test/
    #97734

    AC
    Blocked
    Post count: 7712

    Well you would need to do that on each of the different ones you have, but if you don’t want them full width, you can limit the size all together like this:

    .post-962, .post-962 input, select, textarea  {
    width: 65%;
    }

    That page/post is identified in the code as .post-962. So you can limit how far over the fields stretch with one percentage and leave it as that. If you create another page like this, you would replace the number with that post or page id.

    #97735

    AC
    Blocked
    Post count: 7712

    Add that code to the bottom of your style sheet and you will see the change.

    #97757

    Nick Liberati
    Member
    Post count: 2

    Anitac – thank you for considering the above and taking the time to respond.

    I have followed your instructions. It limits the width of everything in the main section of the page. I only want to limit the width on that social share bar and the width of the input fields in the form. Any ideas on how to do it only for these sections?

    Nick

    #127481

    JenniB
    Participant
    Post count: 19

    Nick,

    Inside your style.css file look for a section similar to this (below is form Magazine Pro, but look for the input, select, textarea):

    
    input,
    select,
    textarea {
    
    	background-color: #fff;
    	border: 1px solid #ddd;
    	color: #222;
    	font-family: 'Raleway', sans-serif;
    	font-size: 14px;
    	font-size: 1.4rem;
    	font-weight: 300;
    	padding: 16px;
    	padding: 1.6rem;
    	width: 100%;
    
    }
    

    To eliminate the full width form fields, simply add “//” in front of the width, so it will look like:

    //width:100%;

    This tells WordPress to ignore this line. Then your fields will automatically resize to whatever you set each form field to be.

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Executive Pro – Form Fields Too Wide’ is closed to new replies.