Brooklyn Theme Contact Page Edit to Full Width

Solved
HiddenStar
Tourist
12 0 3

Hi, I am trying to make my order number field (contact.form.order) full width like the message box, how do I do that? Thanks.

 

<!-- /templates/page.contact.liquid -->
<div class="grid">

  <div class="grid__item large--five-sixths push--large--one-twelfth">

    <header class="section-header text-center">
      <h1>{{ page.title }}</h1>
      <hr class="hr--small">
    </header>

    <div class="grid">
      <div class="grid__item large--four-fifths push--large--one-tenth">
        <div class="rte rte--nomargin rte--indented-images">
          {{ page.content }}
        </div>

        <div class="form-vertical">
          {% form 'contact' %}

            {% comment %}
              Successful message
            {% endcomment %}
            {% if form.posted_successfully? %}
              <p class="note form-success">
                {{ 'contact.form.post_success' | t }}
              </p>
            {% endif %}

            {{ form.errors | default_errors }}

            <div class="grid grid--small">
              
              <div class="grid__item large--one-half">
                <label for="ContactFormName" class="hidden-label">{{ 'contact.form.name' | t }}</label>
                <input type="text" id="ContactFormName" class="input-full" name="contact[{{ 'contact.form.name' | t }}]" placeholder="{{ 'contact.form.name' | t }}" autocapitalize="words" value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}">
              </div>

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

        
          <label for="ContactFormOrder" class="hidden-label"></label>
<input
  required
  type="text"
  id="ContactFormOrder"
  name="contact[Order]"
  placeholder="Order Number"
/>  
          
      
            
            <label for="ContactFormMessage" class="hidden-label">{{ 'contact.form.message' | t }}</label>
            <textarea rows="10" id="ContactFormMessage" class="input-full" 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>
    </div>

  </div>

</div>

 

 

Pallavi
Shopify Expert
1300 175 214

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
Oakleafinfoway
Shopify Partner
308 6 21

Hello

Welcome to the Shopify Community!

This is Jay here from Oakleaf Infoway.

I would love to help you with the same. Here I am a registered partner with Shopify and having more than 5 years of experience and we have expertise in Shopify customization, Desing Enhancement. Small tweaks, Store development, Third-Party app configuration, and many more.

Want to hire me? Please contact me to Email ID: jay@oakleafinfoway.com

Thanks

Team, *Oakleaf Infoway*
- Was my reply helpful? Please *Like* and *Accept* Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact us on Skype: live:.cid.2ca82125d1edaa5f/
Email ID: info@oakleafinfoway.com
0 Likes
HiddenStar
Tourist
12 0 3

Thank you for your reply, pls find as follows:

www.duofoundry.com

PW: duo-s

Pallavi
Shopify Expert
1300 175 214

This is an accepted solution.

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > timber.scss.liquid and paste this at the bottom of the file:

input#ContactFormOrder {
width: 100%!important;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
HiddenStar
Tourist
12 0 3

Thank you so much!

Pallavi
Shopify Expert
1300 175 214

Kindly feel free to get back to me if you need any further assistance Thanks!

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes