decrease high of input field

  • Resolved tyronius

    (@tyronius)


    1 year, 7 months ago

    I’m testing this plug-in for another site.

    I’m trying to reduce the height of the input box

    this is the default css: 

    .cp_cff_11 #fbuilder input[type="text"], .cp_cff_11 #fbuilder input[type="file"], .cp_cff_11 #fbuilder input[type="password"], .cp_cff_11 #fbuilder input[type="date"], .cp_cff_11 #fbuilder input[type="datetime"], .cp_cff_11 #fbuilder input[type="email"], .cp_cff_11 #fbuilder input[type="number"], .cp_cff_11 #fbuilder input[type="search"], .cp_cff_11 #fbuilder input[type="time"], .cp_cff_11 #fbuilder input[type="url"], .cp_cff_11 #fbuilder textarea, .cp_cff_11 #fbuilder select, .cp_cff_11 #fbuilder .select2-selection {

background: #FDFFFD;
border: 1px solid #dcdcdc;
border-radius: 4px;
border-width: 1px;
color: #57665E;
font-family: 'Questrial',sans-serif;
font-size: 13px;
margin: 1px 0;
padding: 15px;
height: auto;
line-height: normal;}

    I tried to reduce the padding to reduce the height using the “Customize Form design by adding this:

    #fbuilder input[type="text"] {
    padding-bottom: 1px;
    padding-right: 1px;
    padding-top: 1px;
    padding-left: 1px;
}

    there is no change, and when looking at the code in Chrome developer, the code I added has strikethrough font. any suggestions?

    Thanks!

    • This topic was modified 1 year, 7 months ago by tyronius.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter tyronius

    (@tyronius)

    sorry, the page is not working. I cant figure out permissions either

    Plugin Author codepeople

    (@codepeople)

    Hello @tyronius

    In a public website, the styles defined themes, third-party plugins, or styles entered through the WordPress settings (Appearance > Customize > Additional CSS) can affect the tags on the page.

    Possible CSS rules that affect sizes are padding, margin, height, width, border, line-height, font-size, etc.

    I cannot identify which rules affect your input boxes (or their appearance) because your web page shows the “Sorry, but you do not have permission to view this content.” message.

    However, if you want to remove the padding and reduce the height of input boxes, you can try the following style definition:

    
#fbuilder input[type="text"],
#fbuilder input[type="number"],
#fbuilder input[type="password"],
#fbuilder input[type="date"]{
padding: 2px !important;
font-size: 14px !important;
line-height: 16px !important;
}

    Note I use !important with every CSS rule. It ensures my rules have precedence over other CSS rules on the page.

    Best regards.

    Thread Starter tyronius

    (@tyronius)

    Thanks!!!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘decrease high of input field’ is closed to new replies.