How to center rich text and a form?

leberhard29
New Member
3 0 0

Hi,

I'm trying to center rich text and a form so when looking at my page on the phone it doesn't cut it off. 

code for form:

{% form 'contact' %}

{% if form.posted_successfully? %}
<p class="note form-success">
{{ 'contact.form.post_success' | t }}

</p>

{% endif %}

{{ form.errors | default_errors }}

{% assign name_attr = 'contact.form.name' | t | handle %}
<label for="ContactFormName" class="label--hidden">{{ 'contact.form.name' | t }}</label>
<input type="text" id="ContactFormName" name="contact[{{ 'contact.form.name' | t }}]" placeholder="{{ 'contact.form.name' | t }}" autocapitalize="words" value="{% if form[name_attr] %}{{ form[name_attr] }}{% elsif customer %}{{ customer.name }}{% endif %}">

<label for="ContactFormEmail" class="label--hidden">{{ 'contact.form.email' | t }}</label>
<input type="email" id="ContactFormEmail" name="contact[email]" placeholder="{{ 'contact.form.email' | t }}" autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}">

{% assign name_attr = 'contact.form.phone' | t | handle %}
<label for="ContactFormPhone" class="label--hidden">{{ 'contact.form.phone' | t }}</label>
<input type="tel" id="ContactFormPhone" name="contact[{{ 'contact.form.phone' | t }}]" placeholder="{{ 'contact.form.phone' | t }}" pattern="[0-9\-]*" value="{% if form[name_attr] %}{{ form[name_attr] }}{% elsif customer %}{{ customer.phone }}{% endif %}">

<label for="ContactFormMessage" class="label--hidden">{{ 'contact.form.message' | t }}</label>
<textarea rows="10" id="ContactFormMessage" name="contact[{{ 'contact.form.message' | t }}]" placeholder="{{ 'contact.form.message' | t }}">{% if form.body %}{{ form.body }}{% endif %}</textarea>

<input type="submit" class="btn right" value="{{ 'contact.form.send' | t }}">

{% endform %}
</div>

</div>

0 Likes

Dear @leberhard29 

 

You can get better solution at https://community.shopify.com/c/Shopify-Design/bd-p/ecommerce-design

Best Regards
MS Web Designer| MS Web International | Task4Store
Contact Us: https://www.task4store.com/pages/contact-us OR task4store@mswebdesigner.com
Was our reply helpful? Please Like or Accept solution
0 Likes