SOLVED

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

Go to solution
Adele_Grono2
Level 2

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;  

 

1 ACCEPTED SOLUTION

Accepted Solutions
Adele_Grono2
Level 2

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

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;

}

View solution in original post

5 REPLIES 5
SanfordWhiteman
Level 10 - Community Moderator

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

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

SanfordWhiteman
Level 10 - Community Moderator

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

.mktoForm [name="comments"] {

  /* styles here */}

will address only a form field named comments.

Adele_Grono2
Level 2

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

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;

}

View solution in original post

SanfordWhiteman
Level 10 - Community Moderator

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

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

Adele_Grono2
Level 2

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

No worries   Sanford Whiteman​ many thanks again for you super quick response