How to make Rich Text Form Field - Responsive

Highlighted
Level 2

How to make Rich Text Form Field - Responsive

I am struggling to get a rich text field on a form to be responsive I have tried a couple of things in the CSS but nothing seems to work.  Any suggestions.

Right now I am trying to put it in a table so disregard that in the HTML Code for the field:

<div>
<table width="402" height="47">
<tbody>
<tr>
<td style="text-align: center;"><span>By clicking the “Submit” button, you agree to receive communications from KVH, its family of companies, and business partners regarding KVH products and services via email. To provide you with the best content we may use your content consumption to send you the most relevant materials. You can unsubscribe at any time by emailing us at privacy@kvh.com. For additional information see our<span> </span></span><a href="https://www.kvh.com/Legal/Privacy.aspx" target="_blank">Privacy Policy</a><span>.</span><br /></td>
</tr>
</tbody>
</table>
</div>

CSS Styling Code:

.mktoButton {
background: #c00;
border: 1px solid #c00!important;
color: #fff;
display: inline-block!important;
font-weight: 400!important;
font-family: HelveticaNeueLTPro-Lt!important;
text-align: center!important;
white-space: nowrap!important;
vertical-align: middle!important;
-webkit-user-select: none!important;
-moz-user-select: none!important;
-ms-user-select: none!important;
user-select: none!important;
border: 1px solid transparent!important;
padding: 0.5rem 1.5rem!important;
font-size: 1rem!important;
letter-spacing: .04em!important;
text-shadow: none!important;
text-decoration:none!important;
line-height: 1.5!important;
border-radius: 0!important;
-webkit-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out!important;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out!important;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out!important;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out!important;
}

.mktoForm .mktoButtonWrap.mktoSimple .mktoButton:hover {
background: #fff!important;
color: #c00!important;
text-decoration: none!important;
border: 1px solid #c00!important;
width: 100%!important;
}

.mktoForm .mktoError .mktoErrorMsg {
display: block;
margin-top: 7px;
font-family: HelveticaNeueLTPro-Lt!important;
background-color: #c00!important;
background-image: -webkit-none;
background-image: -moz-none;
background-image: none;
background-image: -ms-none;
/*background-image: -webkit-linear-gradient(#e51b00 43%, #ba1600 100%);
background-image: -moz-linear-gradient(#e51b00 43%, #ba1600 100%);
background-image: linear-gradient(#e51b00 43%, #ba1600 100%);
background-image: -ms-linear-gradient(#e51b00 43%, #ba1600 100%);*/
border: none;
-webkit-border-radius: 0px!important;
border-radius: 0px!important;
-webkit-box-shadow: none;
box-shadow: none;
color: #f3f3f3;
font-size: 1em;
line-height: 1.2em;
max-width: 16em;
padding: 0.4em 0.6em;
text-shadow: none!important;
width: 100%!important;
}

.mktoForm .mktoError .mktoErrorArrow {
background-color: #c00!important;
border: 1px solid #c00!important;
width: 100%!important;
}

.mktoForm{
font-family: HelveticaNeueLTPro-Lt!important;
font-size: 1rem!important;
font-weight: 400!important;
line-height: 1.5!important;
color: #212529!important;
width: 100%!important;

}

.mktoForm .mktoFormRow .mktoLabel {
font-family: HelveticaNeueLTPro-Lt!important;
font-size: 1rem!important;
font-weight: 400!important;
line-height: 1.5!important;
color: #212529!important;
width: 100%!important;
}

.disclaimer{
font-size:.5rem!important;
line-height: 1!important;
margin-top: 10px!important;
margin-bottom: 10px!important;
text-align: center!important;
width: 100%!important;

}

Tags (2)
18 REPLIES 18
Highlighted
Level 10 - Community Moderator

Re: How to make Rich Text Form Field - Responsive

Please highlight your code using the Syntax Highlighter (in Advanced Editor) so it's readable. And link to an example page with your form.

Highlighted
Level 2

Re: How to make Rich Text Form Field - Responsive

When I go into the Editor I don't have the option for an advanced editor "Syntax Highlighter"Screen Shot 2019-05-17 at 9.07.00 AM.png

Highlighted
Level 2

Re: How to make Rich Text Form Field - Responsive

Link to page with form on the bottom contact us

http://new.kvh.com.w2.wfdev.net/maritime-solutions/commercial-maritime

Highlighted
Level 10 - Community Moderator

Re: How to make Rich Text Form Field - Responsive

The RTA is clearly fixed-width, that's your cause.

.mktoForm .mktoHtmlText {
width: auto !important;
}
Highlighted
Level 2

Re: How to make Rich Text Form Field - Responsive

I added this additional code to the CSS but it did not fix the problem.  In speaking with Marketo they mentioned the text in the field is exceeding the limit and causing the problem.  They recommended adding the text into the CSS directly which I haven't seen before.  We are going to try that and we see what we get.


Thanks

Highlighted
Level 10 - Community Moderator

Re: How to make Rich Text Form Field - Responsive

Show me the page with the added CSS. That code was tested on your site, it wasn't just off the top of my head.

This has nothing to do with "exceeding the limit"... whatever that would mean.

Highlighted
Level 2

Re: How to make Rich Text Form Field - Responsive

I updated the code in the "Syntax Highlighter" above with your suggestion.  Here is a link to the site using form http://new.kvh.com.w2.wfdev.net/maritime-solutions/leisure-marine/superyacht-solutions

Highlighted
Level 10 - Community Moderator

Re: How to make Rich Text Form Field - Responsive

I see no evidence of that style on the site. As you can see, the width is still being taken from the local style and there's no override:

pastedImage_1.png

Highlighted
Level 2

Re: How to make Rich Text Form Field - Responsive

I am not sure why it's not there.. here is snapshot of the CSS codeScreen Shot 2019-05-20 at 4.38.53 PM.png