Hi.
How to make InfusionSoft forms that I have on a website responsive.
I have tried a media query that targets the form class but I know it's not right because it's not working.
@media (min-width: 320px) and (max-width: 480px) {
.infusion-form {
width: 100%
height: auto;
}
}
The HTML for one of the forms is..
<form accept-charset="UTF-8" action="https://uz695.infusionsoft.com/app/form/process/6e574bcf911bb2d62325880403fcac21" class="infusion-form" id="inf_form_6e574bcf9114hj862325880403fh621" method="POST">
<input name="inf_form_xid" type="hidden" value="6e57tbcffb2d623g2h5jjk880403fcac21" />
<input name="inf_form_name" type="hidden" value="Web Form submitted" />
<input name="infusionsoft_version" type="hidden" value="1.70.0.156820" />
<div class="infusion-field">
<label for="inf_field_FirstName">Name *</label>
<input class="infusion-field-input" id="inf_field_FirstName" name="inf_field_FirstName" placeholder="Name *" type="text" />
</div>
<div>
<div> </div>
</div>
<div class="infusion-field">
<label for="inf_field_Email">Email *</label>
<input class="infusion-field-input" id="inf_field_Email" name="inf_field_Email" placeholder="Email *" type="text" />
</div>
<div>
<div> </div>
</div>
<div>
<div> </div>
</div>
<div class="infusion-submit">
<button class="infusion-recaptcha" id="recaptcha_6e574bcf911bb2d62325880403fcac21" type="submit">CLICK TO DOWNLOAD</button>
</div>
<div>
<div> </div>
</div>
<div class="infusion-field">
<span class="infusion-option">
<input id="inf_option_BysubmittingmydetailsIagreetoreceivinggreatcontentfromSoulSpaceHealersknowingIcanunsubscribeatanytime" name="inf_option_BysubmittingmydetailsIagreetoreceivinggreatcontentfromSoulSpaceHealersknowingIcanunsubscribeatanytime" type="checkbox" value="263" />
<label for="inf_option_BysubmittingmydetailsIagreetoreceivinggreatcontentfromSoulSpaceHealersknowingIcanunsubscribeatanytime">By submitting my details I agree to receiving great content from Soul Space Healers knowing I can unsubscribe at any time :-) *</label>
</span>
</div>
</form>
<script type="text/javascript" src="https://uz695.infusionsoft.app/app/webTracking/getTrackingCode"></script>
<script type="text/javascript" src="https://uz695.infusionsoft.com/resources/external/recaptcha/production/recaptcha.js?b=1.70.0.156820"></script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadInfusionRecaptchaCallback&render=explicit" async="async" defer="defer"></script>
<script type="text/javascript" src="https://uz695.infusionsoft.com/app/timezone/timezoneInputJs?xid=6e574bcf911bb2d62325880403fcac21"></script>
Thanks for any help you can provide.