How to make Rich Text Form Field - Responsive

[Ronda_Vye]

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;

}

[SanfordWhiteman]

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

[Ronda_Vye]

When I go into the Editor I don't have the option for an advanced editor "Syntax Highlighter"

[Ronda_Vye]

Link to page with form on the bottom contact us

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

[SanfordWhiteman]

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

.mktoForm .mktoHtmlText {
    width: auto !important;
}‍‍‍

[Ronda_Vye]

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

[SanfordWhiteman]

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.

[Ronda_Vye]

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

[SanfordWhiteman]

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:

[Ronda_Vye]

I am not sure why it's not there.. here is snapshot of the CSS code