How to change contact form alignment to the left?

Hello,

Please help me. I have a contact form but I need to make it left aligned rather than right aligned. Thank you in advance for any help!

Here is the current code:

Show More

{% comment %}
** Contact form - homepage partial **

  • Draggable section
  • Uses blocks
    {% endcomment %}

{% comment %} Assign object as block or section {% endcomment %}
{% if type == ‘block’ %}
{%- assign object = block -%}
{% else %}
{%- assign object = section -%}
{% endif %}
{%- assign id = object.id -%}

{% comment %} Content settings {% endcomment %}
{%- assign blocks = object.blocks -%}
{%- assign contact_image = object.settings.contact_image -%}
{%- assign contact_heading = object.settings.contact_heading -%}
{%- assign contact_subheading = object.settings.contact_subheading -%}
{%- assign contact_content = object.settings.contact_content -%}
{% comment %} End content settings {% endcomment %}

{% comment %} Advanced {% endcomment %}
{%- assign css_class = object.settings.css_class -%}
{%- assign custom_css = object.settings.custom_css -%}

{% comment %} Section specific CSS {% endcomment %}
{% style %}
{% render ‘css-loop’,
css: custom_css,
id: id
%}
{% endstyle %}

@gemmategen

Please share your contact page URL.

Hello dmwwebartisan,

Here is the Live URL - https://tegenaccessories.co.uk/pages/contact

I have been working on an older version so the contact form is now right-aligned under a calendar that I have added so I basically just need to move the contact form to be left aligned or centre aligned (whichever looks best so knowing how to edit this would be really useful)

Thank you very much for reaching out!

@gemmategen

Please share screenshot what do you want!

Thanks!

Please replace this code

Show More

php {% comment %} ** Contact form - homepage partial ** - Draggable section - Uses blocks {% endcomment %} {% comment %} Assign object as block or section {% endcomment %} {% if type == 'block' %} {%- assign object = block -%} {% else %} {%- assign object = section -%} {% endif %} {%- assign id = object.id -%} {% comment %} Content settings {% endcomment %} {%- assign blocks = object.blocks -%} {%- assign contact_image = object.settings.contact_image -%} {%- assign contact_heading = object.settings.contact_heading -%} {%- assign contact_subheading = object.settings.contact_subheading -%} {%- assign contact_content = object.settings.contact_content -%} {% comment %} End content settings {% endcomment %} {% comment %} Advanced {% endcomment %} {%- assign css_class = object.settings.css_class -%} {%- assign custom_css = object.settings.custom_css -%} {% comment %} Section specific CSS {% endcomment %} {% style %} {% render 'css-loop', css: custom_css, id: id %} {% endstyle %}

I would like the contact form to be moved over to the right to either be central or directly under the writing on the right side please, Thank you!

Thank you very much for your help, it has moved and looks much better. There is quite a lot of white space on the right side of the calendar, is there a way of having the contact form next to the calendar please?

Please see attached screenshot:

@gemmategen

like this screenshot

Yes but with the calendar on the right side of the writing please- here is the embed code for the calendar which is in the full code but it wont show up on the live version as I am editing an older version at the moment :

Thank you again for all of your help!

Please try this code

Show More

php {% comment %} ** Contact form - homepage partial ** - Draggable section - Uses blocks {% endcomment %} {% comment %} Assign object as block or section {% endcomment %} {% if type == 'block' %} {%- assign object = block -%} {% else %} {%- assign object = section -%} {% endif %} {%- assign id = object.id -%} {% comment %} Content settings {% endcomment %} {%- assign blocks = object.blocks -%} {%- assign contact_image = object.settings.contact_image -%} {%- assign contact_heading = object.settings.contact_heading -%} {%- assign contact_subheading = object.settings.contact_subheading -%} {%- assign contact_content = object.settings.contact_content -%} {% comment %} End content settings {% endcomment %} {% comment %} Advanced {% endcomment %} {%- assign css_class = object.settings.css_class -%} {%- assign custom_css = object.settings.custom_css -%} {% comment %} Section specific CSS {% endcomment %} {% style %} {% render 'css-loop', css: custom_css, id: id %} {% endstyle %}

Hello,

Thank you again for your help, I have replaced the code and this is how it looks : It doesn’t show up the way it looks on your screenshot and the form logo now appears above the calendar.

@gemmategen

Please send me your theme in zip format. I will look into it and send you the exact solution.

Thank you very much, I appreciate all your help! I have swapped the code out …

The contact form is still not stretching across the screen:

Thank you for your help, I am not sure what you mean here but the only change I need to do now is to increase the width of the contact form boxes please. Thanks again!

@gemmategen

Please share preview url !

Thanks!

Here is the preview URL : https://tegenaccessories.co.uk/pages/contact

Thank you!

@gemmategen

Sorry but this wrong url !

Thanks!

How about this?: https://yvuez42563gflpvj-6006397.shopifypreview.com

@gemmategen

Please send preview url contact us section code .

Thanks!

Is this correct? https://tegen.myshopify.com/admin/themes/123374141638/editor?previewPath=%2Fpages%2Fcontact

Or this ? https://yvuez42563gflpvj-6006397.shopifypreview.com