Question

尝试通过图像获取移动响应的联系表单。目前，它可以在桌面上运行 - 但在移动设备上，表单保持相同的高度并保持不变，不会保留在图像中。

继承我的代码：

<div class="rte">
{{ page.content }}
</div>


<style type="text/css">

  .contact {


    position: relative;
    background-image:     url(https://cdn.shopify.com/s/files/1/0865/3908/files/carbkgrndcontact.png?11268211349817179123);
    background-position: center-top;
    background-repeat: no-repeat;
    background-size: 140%;
    color: white;
   text-align: left;
    margin: auto;
    padding-left: 5%;
    padding-bottom:15%;
    padding-top: 1%;
    padding-right: 20%;


  }



  #form {


    width: 80%;
    height: 80%;
   font-size: 70%;


  }



  .input-wrapper {



    padding: 5px;


  }



</style>

{% comment %}
End CSS
{% endcomment %}














{% comment %}
Begin HTML
{% endcomment %}



<html>

  <title></title>

  <body>


    <div class="contact">
       <div id="form">
 {% comment %}
jQuery Contact Form
{% endcomment %}

      {% form 'contact' %}

{% if form.errors %}
  {{ form.errors | default_errors }}
{% endif %}

{% if form.posted_successfully? %}
  <p>{{ 'general.contact_page.success_message' | t }}</p>
{% else %}

  <div class="input-wrapper">
    <label>{{ 'general.name' | t }}</label>
    <input type="text" name="contact[name]" value="{{ form.name }}">
  </div>

  <div class="input-wrapper">
    <label>{{ 'general.email' | t }}</label>
    <input type="text" name="contact[email]" value="{{ form.email }}"     class="{% if form.errors contains 'email' %}error{% endif %}">
  </div>

  <div class="input-wrapper">
    <label>{{ 'general.message' | t }}</label>
    <textarea name="contact[body]" rows="5">{{ form.comments }}</textarea>
  </div>

  <div class="input-wrapper">
    <input type="submit" value="{{ 'general.contact_page.submit' | t }}">
  </div>

    {% endif %}

  {% endform %}

  </div>
</div>


    <hr>


    <p> Blahblahblah </p>


  </body>

</html>

无法通过图像获得移动响应

0 个答案: