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.
.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;
Solved! Go to Solution.
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;
}
Just put up a test form on a test LP. (Or embed the test form in a CodePen.)
.mktoForm [name="comments"] {
/* styles here */}
will address only a form field named comments.
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;
}
Although attribute names are not case-sensitive, you should use lower-case name for clarity.
No worries Sanford Whiteman many thanks again for you super quick response