CSS forms change the height on a text field and not effect other text fields | Community
Skip to main content
Adele_Grono2
Level 2
Dec 8, 2017 6:12 AM UTC
Solved

CSS forms change the height on a text field and not effect other text fields

Hi there

Sorry I would like to change the height on the 'comments' field only, any suggestions on what to change in the CSS so it will enlarge the comments text field and not effect the other text fields? Please items attached below. Is it possible to use reference the ID field? (see line 53) If you would like to view the the full url please follow me and I can supply directly.

@Sanford Whiteman​

.mktoForm { 

  width: 100% !important; 

} 

.mktoForm .mktoOffset { 

    float: left; 

    height: 1.2em; 

} 

 

mkto.FormRow { 

  float: left !important; 

} 

.mktoCheckboxList .mktoField[id^="mktoCheckbox"] { 

   align: left !important;    

  float: left !important; 

     clear: both; 

   margin-left: 0 !important; 

  } 

 

.mktoForm div, 

.mktoForm span, 

.mktoForm p { 

width: 100%; 

} 

.mktoForm input[type=text], 

.mktoForm input[type=url], 

.mktoForm input[type=tel], 

.mktoForm input[type=email], 

.mktoForm input[type=number], 

.mktoForm input[type=date], 

.mktoForm select.mktoField, 

.mktoForm textarea.mktoField{ 

       width:100% !important; 

       padding: 8.5px !important; 

       background-color: #f0f0f0 !important; 

       font-size: 13px; 

       color: #666666; 

       border: none; 

       box-shadow: none; 

} 

.mktoForm input[type=radio] { 

  margin-left: 0 !important; 

} 

.mktoForm input[type=checkbox] { 

       float: none; 

     clear: both; 

  margin-left: 0 !important;

} 

}

.mktoForm input[id^="5126"] { 

       height:50px  !important; 

} 

} 

.mktoCheckboxList .mktoField[id^="mktoCheckbox"] { 

   align: left !important;    

  float: left !important; 

     clear: both; 

   margin-left: 0 !important; 

  } 

 

 

.mktoForm .mktoCheckboxList { 

     float: left !important; 

     clear: both; 

     margin-left: 0 !important; 

} 

 

.mktoForm button.mktoButton { 

  background: linear-gradient(to bottom, #E21A23 0%,#E21A23 100%) !important; 

  border: 1px solid #E21A23 !important; 

  border: none; 

  class: btn btn-primary ${buttonStyle}; 

  class:"btn btn-primary ${buttonStyle}"; 

font-family:'Helvetica Neue Roman' Helvetica, Arial, sans-serif !important; 

  padding: 10px 20px; 

  border-radius: 5px; 

  text-transform: uppercase; 

  font-size: 15px; 

  letter-spacing: 2px; 

  color: #fff; 

} 

 

@media only screen and (max-width: 480px) { 

.mktoForm button.mktoButton  { 

  margin-top: 0.5em !important; 

  } 

 

 

 

 

 

@media only screen and (max-width: 480px) { 

.mktoForm label { 

  align: left !important; 

} 

 

 

 

 

@media only screen and (max-width: 480px) {  

.mktoForm .mktoCheckboxList { 

    align: left !important;    

  float: none; 

    ar: both; 

     margin-left: 0 !important;

@@@@@@d

 

 

 

.mktoRadioList .mktoField { 

                margin-bottom: 0.1em !important;  

} 

.mktoRadioList label { 

                margin-bottom: 0.1em !important;  

} 

 

@media screen and (max-width: 480px){ 

  .mktoForm.mktoLayoutAbove input.mktoField[type="checkbox"],  

  .mktoForm.mktoLayoutAbove input.mktoLogicalField[type="checkbox"] { 

    width: auto !important; 

    height: auto !important; 

  } 

} 

 

 

@media screen and (max-width: 480px){ 

  .mktoForm.mktoLayoutAbove .mktoFieldDescriptor.mktoFormCol { 

    margin-bottom: 5px !important; 

  } 

}

 

.mktoForm.mktoLayoutAbove .mktoFieldDescriptor.mktoFormCol { 

    margin-bottom: 5px !important;  

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Adele_Grono2
Adele_Grono2Accepted solution
Level 2
Dec 11, 2017 5:34 AM UTC

Hi there @Sanford Whiteman​

I used your suggested code as a base, then placed in the name of the field, then it works

Many thanks, @Sanford Whiteman​ really appreciate your quick reply 

.mktoForm [Name="templiveevent6comments"] {

      height: 10em !important;

}

5 replies

SanfordWhiteman
Level 10
Dec 8, 2017 6:33 AM UTC

.mktoForm [name="comments"] {

  /* styles here */}

will address only a form field named comments.

Translate
Adele_Grono2
Adele_Grono2AuthorAccepted solution
Level 2
Dec 11, 2017 5:34 AM UTC

Hi there @Sanford Whiteman​

I used your suggested code as a base, then placed in the name of the field, then it works

Many thanks, @Sanford Whiteman​ really appreciate your quick reply 

.mktoForm [Name="templiveevent6comments"] {

      height: 10em !important;

}

Translate
SanfordWhiteman
Level 10
Dec 11, 2017 5:44 AM UTC

Although attribute names are not case-sensitive, you should use lower-case name for clarity.

Translate
SanfordWhiteman
Level 10
Dec 8, 2017 6:18 AM UTC

Just put up a test form on a test LP. (Or embed the test form in a CodePen.)

Translate