How to make an InfusionSoft form responsive

[dmac]

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>&nbsp;</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>&nbsp;</div>
    </div>
    <div>
        <div>&nbsp;</div>
    </div>
    <div class="infusion-submit">
        <button class="infusion-recaptcha" id="recaptcha_6e574bcf911bb2d62325880403fcac21" type="submit">CLICK TO DOWNLOAD</button>
    </div>
    <div>
        <div>&nbsp;</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.

[Funce]

Hi there,

If you could please add your code using the forum code block feature, it will let other members help you easier.

The setting can be found as below.