How to make Rich Text Form Field - Responsive | Community
Skip to main content
Ronda_Vye
Level 2
May 17, 2019
Question

How to make Rich Text Form Field - Responsive

  • May 17, 2019
  • 2 replies
  • 6532 views

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;

}

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

2 replies

SanfordWhiteman
Level 10
May 17, 2019

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
Ronda_VyeAuthor
Level 2
May 17, 2019

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

Ronda_Vye
Ronda_VyeAuthor
Level 2
May 17, 2019

Link to page with form on the bottom contact us

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

Ronda_Vye
Ronda_VyeAuthor
Level 2
May 17, 2019
/* Add your custom CSS below */


.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;
}
.mktoForm .mktoHtmlText {
width: auto!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;
}

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

.mktoForm{
font-family: HelveticaNeueLTPro-Lt!important;
font-size: 1rem!important;
font-weight: 400!important;
line-height: 1.5!important;
color: #212529!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;
}

.disclaimer{
font-size:.5rem!important;
line-height: 1!important;
margin-top: 10px!important;
margin-bottom: 10px!important;
}
Ronda_Vye
Ronda_VyeAuthor
Level 2
May 17, 2019
<p class="disclaimer" style="text-align: center;"><span style="font-family: helvetica, arial, sans-serif; font-size: 11px;">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 <a href="https://www.kvh.com/Legal/Privacy.aspx" target="_blank" id="">Privacy Policy</a>.</span></p>